Bonjour tout le monde,
J'utilise actuellement une infobulle qui s'afffiche au survol de la souris sur une icone à côté de mes liens.
Dans cette infobulle je fais apparaitre une capture du site externe provenant de snap.com.
Mon problème c'est que actuellement toutes ces images sont chargées directement au chargement de la page et je voudrais mettre un script ajax permettant de charger l'image uniquement lors du survole de la souris.
code d'un lien :
<a class="bulle" href="http://news.google.fr/" onMouseover="window.status='Actualités';return true;" onMouseout="window.status='';return true;" target="_self"><img src="images/infos.gif" border="0" align="absmiddle" /><span><img class="info_image" src="http://shots.snap.com/preview/?url=http://news.google.fr/&key=756cc3d7e4ec7ef9a12dec2e5991a0ef" /></span></a>
code CSS :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
| a.bulle {
font-weight:bold;
margin: 0 2px;
color: #000000;
position: relative;
text-decoration: none;
}
a.bulle span {
display: none;
}
a.bulle:hover {
background: none; /* correction d'un bug IE */
z-index: 500;
font-size:13px;
color:#99CCFF;
}
a.bulle:hover span {
display: inline;
position: absolute;
top: 1em;
left: 1em;
background-image:url(../images/bulle.png);
background-repeat:no-repeat;
text-align: center;
color: white;
width:314px;
height:240px;
}
img.info_image {
margin-top:45px;
} |
Pour avoir l'aperçu du résultat actuel : http://www.startaccueil.com
Merci pour votre aide.
Partager