Vés al contingut (premeu Retorn)

Bubble Popup

Informació contextual al posar el ratolí al damunt

El resultat

Pas a pas

  1. Hem de copiar i enganxar el codi següent a la pàgina del Genweb on volem incorporar aquest efecte. No oblideu a editar la pàgina amb la visualització del Codi Font.
  2. Tenir en compte que aquest codi té tres parts diferenciades: el codi CSS, el codi JavaScript i el codi HTML.
  3. Per adaptar el contingut dinàmic a les nostres necessitats només haurem de modificar el codi HTML, respectant les definicions dels identificadors i les classes.

<style media="screen" type="text/css">

        .bubbleInfo {
            position: relative;
            left: 100px;
            width: 500px;
        }

        /* Bubble pop-up */
 
        .popup {
                position: absolute;
                display: none;
                z-index: 50;
                border-collapse: collapse;
        }
 
        .popup table, td, tr, th{
                padding: 0px !important;
        }
        .popup td.corner {
                height: 15px;
                width: 19px;
        }
 
        .popup td#topleft { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-1.png); }
        .popup td.top { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-2.png); }
        .popup td#topright { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-3.png); }
        .popup td.left { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-4.png); }
        .popup td.right { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-5.png); }
        .popup td#bottomleft { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-6.png); }
        .popup td.bottom { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-7.png); text-align: center;}
        .popup td.bottom img { display: block; margin: 0 auto; }
        .popup td#bottomright { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-8.png); }
 
        .popup table.popup-contents {
                font-size: 12px;
                line-height: 1.2em;
                background-color: #fff;
                color: #666;
                font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
                }
 
        table.popup-contents th {
                text-align: right;
                text-transform: lowercase;
                }
 
        table.popup-contents td {
                text-align: left;
                }
 
        tr#release-notes th {
                text-align: left;
                text-indent: -9999px;
                background: url(http://jqueryfordesigners.com/demo/images/coda/starburst.gif) no-repeat top right;
                height: 17px;
                }
 
        tr#release-notes td a {
                color: #333;
        }
</style>

<script src="http://jqueryfordesigners.com/demo/jquery.js" type="text/javascript"></script> <script type="text/javascript">
    $(function () {
        $('.bubbleInfo').each(function () {
            var distance = 10;
            var time = 250;
            var hideDelay = 500;
 
            var hideDelayTimer = null;
 
            var beingShown = false;
            var shown = false;
            var trigger = $('.trigger', this);
            var info = $('.popup', this).css('opacity', 0);
 
 
            $([trigger.get(0), info.get(0)]).mouseover(function () {
                if (hideDelayTimer) clearTimeout(hideDelayTimer);
                if (beingShown || shown) {
                    // don't trigger the animation again
                    return;
                } else {
                    // reset position of info box
                    beingShown = true;
 
                    info.css({
                        top: -90,
                        left: -33,
                        display: 'block'
                    }).animate({
                        top: '-=' + distance + 'px',
                        opacity: 1
                    }, time, 'swing', function() {
                        beingShown = false;
                        shown = true;
                    });
                }
 
                return false;
            }).mouseout(function () {
                if (hideDelayTimer) clearTimeout(hideDelayTimer);
                hideDelayTimer = setTimeout(function () {
                    hideDelayTimer = null;
                    info.animate({
                        top: '-=' + distance + 'px',
                        opacity: 0
                    }, time, 'swing', function () {
                        shown = false;
                        info.css('display', 'none');
                    });
 
                }, hideDelay);
 
                return false;
            });
        });
    });
</script>

<!-- AQUÍ COMENÇA EL CODI HTML QUE HEM DE MODIFICAR I ADAPTAR A LES NOSTRES NECESSITATS. En negreta, el codi del Popup, que només apareixerà quan el ratolí passi per damunt de la imatge -->
<div class="bubbleInfo">
<div><img id="download" class="trigger" alt="" src="http://jqueryfordesigners.com/demo/images/coda/nav-download.png" /></div>
<table class="popup" id="dpop">
    <tbody>
        <tr>
            <td class="corner" id="topleft"></td>
            <td class="top"></td>
            <td class="corner" id="topright"></td>
        </tr>
        <tr>
            <td class="left">&nbsp;</td>
            <td>
            <table class="popup-contents">
                <tbody>
                    <tr>
                        <th>File:</th>
                        <td>coda 1.1.zip</td>
                    </tr>
                    <tr>
                        <th>Date:</th>
                        <td>11/30/07</td>
                    </tr>
                    <tr>
                        <th>Size:</th>
                        <td>17 MB</td>
                    </tr>
                    <tr>
                        <th>Req:</th>
                        <td>Mac OS X 10.4+</td>
                    </tr>
                    <tr id="release-notes">
                        <th>Read the release notes:</th>
                        <td><a title="Read the release notes" href="https://genweb.upc.edu/comunicacio/www/genweb-upc/formacio_gw3/proves-jquery/bubble-popup/releasenotes.html">release notes</a></td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td class="right"></td>
        </tr>
        <tr>
            <td id="bottomleft" class="corner"></td>
            <td class="bottom"><img height="29" width="30" alt="popup tail" src="http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png" /></td>
            <td class="corner" id="bottomright"></td>
        </tr>
    </tbody>
</table>
</div>