Afficher une infobulle sur une photo avec jquery

Voici une infobulle au design plus évolué : Cliquez sur le lien et survolez l'image avec la souris

Ce programme est proposé par Coda PopUp Bubbles

Première étape :

Il vous faut tout d'abord le programme jquery.js. Pour cela : rendez-vous sur Jquery,

Cliquez sur Download jQuery 1.2.6 (16kb, Minified and Gzipped) Great for production use.

Vous venez d'enregistrer jQuery 1.2.6

Deuxième étape :

Dans l'administration de votre blog, Documents , Autres Fichiers :

• créez un répertoire nommé Coda
• vous y enregistrez le fichier jQuery 1.2.6
• vous notez son adresse

Troisième étape :

Vous créez les encadrements de ce pop up :

soit en copiant/collant ceux-là (clic droit la souris, sauvegarder sous...)

19px*15px -   bubble-1.png	5px*15px -   bubble-2.png	19*15px -   bubble-3.png
19px*15px -   bubble-4.png		19px*5px -   bubble-5.png
19px*29px -   bubble-6.png	4px*29px -   bubble-7.png	19px*29px -   bubble-8.png

soit en les concevant avec un logiciel de dessin en respectant les dimensions

Dans l'administration de votre blog, Documents, Autres Fichiers, répertoire Coda : vous sauvegardez ces images en conservant leur nom (bubble-1.png, etc...)

Quatrième étape :

En HTML, lors de la création de cette infobulle, vous collez

<style type="text/css" media="screen"> 
.bubbleInfo { position: relative;top: 150px; left: 100px; width: auto;}
.trigger { position: absolute;     }
.popup {     position: absolute;             display:none;          z-index: 50;    border-collapse: collapse;  }
 .popup td.corner {              height: 15px;             width:19px;     }
.popup td#topleft { background-image: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/bubble-1.png);background-repeat:no-repeat; }
.popup td.top { background-image: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/bubble-2.png);background-repeat:repeat-x; }
.popup td#topright { background-image: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/bubble-3.png);background-repeat:no-repeat; }
.popup td.left { background-image: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/bubble-4.png);background-repeat:repeat-y; }
.popup td.right { background-image: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/bubble-5.png);background-repeat:repeat-y; }
.popup td#bottomleft { background-image: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/bubble-6.png); background-repeat:no-repeat;}
.popup td.bottom { background-image: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/bubble-7.png); background-repeat:repeat-x;}
.popup td#bottomright { background-image: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/bubble-8.png); background-repeat:no-repeat;}
 .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; }
</style>

Vous remplacez ce qui est en rouge par les adresses de vos images (3ème étape)

Vous collez ensuite toujours en HTML

<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/jquery-1.2.6.min.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>

Vous remplacez ce qui est en bleu par l'adresse de votre fichier jquery.js (2ème étape).

Et enfin, la conception de votre pop up, toujours en HTML

<div class="bubbleInfo">
<div><img class="trigger" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/an10.JPG" /></div>
<table id="dpop" class="popup" border="0">
<tbody>
<tr>
<td id="topleft" class="corner">&nbsp;</td>
<td class="top">&nbsp;</td>
<td id="topright" class="corner">&nbsp;</td>
</tr>
<tr>
<td class="left">&nbsp;</td>
<td class="popup-contents">Les Ficelles d'Anna K<br /> Aide pour cr&eacute;er et personnaliser un blog</td>
<td class="right">&nbsp;</td>
</tr>
<tr>
<td id="bottomleft" class="corner">&nbsp;</td>
<td class="bottom">&nbsp;</td>
<td id="bottomright" class="corner">&nbsp;</td>
</tr>
</tbody>
</table>
</div>

En vert, l'adresse de votre image qui apparaîtra sur le blog
En violet, le message qui apparaîtra dans le pop up : <br /> représente un saut de ligne.