Bubble Popup
Informació contextual al posar el ratolí al damunt
El resultat
| ||||||||||||
 |
Pas a pas
- 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.
- Tenir en compte que aquest codi té tres parts diferenciades: el codi CSS, el codi JavaScript i el codi HTML.
- 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.
.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">
<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 -->
<!-- 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"> </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>
Comparteix: