Bonjour à tous,
j'aimerai mettre en place un système d'infobulle lorsqu'un visiteur survole une partie d'une image présente sur mon site.
Dans cette infobulle j'aimerai aussi mettre un lien vers une autre page
Pour se faire, j'ai insérer des zones cliquable sur mon image (ainsi je peux aussi mettre un document en téléchargement)
Après une recherche sur le web, j'ai réussi soit à afficher l'infobulle au bon endroit(c'est à dire sur la zone cliquable) mais sans pouvoir cliquer sur le lien
soit afficher l'infobulle toujours au même endroit (en haut de ma page) 
J'aimerai donc afficher l'infobulle au bon endroit et pouvoir cliquer sur le lien
voici le code :
script javascript
Code :
- function GetId(id)
- {
- return document.getElementById(id);
- }
- var i=false; // La variable i nous dit si la bulle est visible ou non
- function move(e)
- {
- if(i) // Si la bulle est visible, on calcul en temps reel sa position ideale
- {
- if (navigator.appName!="Microsoft Internet Explorer" ) // Si on est pas sous IE
- {
- GetId("curseur" ).style.left=e.pageX + 5+"px";
- GetId("curseur" ).style.top=e.pageY + 10+"px";
- }
- else
- {
- if(document.documentElement.clientWidth>0)
- {
- GetId("curseur" ).style.left=20+event.x+document.documentElement.scrollLeft+"px";
- GetId("curseur" ).style.top=10+event.y+document.documentElement.scrollTop+"px";
- }
- else
- {
- GetId("curseur" ).style.left=20+event.x+document.body.scrollLeft+"px";
- GetId("curseur" ).style.top=10+event.y+document.body.scrollTop+"px";
- }
- }
- }
- }
- function montre(text)
- {
- if(i==false)
- {
- GetId("curseur" ).style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
- GetId("curseur" ).innerHTML = text; // on copie notre texte dans l'élément html
- i=true;
- }
- }
- function cache()
- {
- if(i==true)
- {
- GetId("curseur" ).style.visibility="hidden"; // Si la bulle est visible on la cache
- i=false;
- }
- }
- //document.onmousemove=move; // dès que la souris bouge, on appelle la fonction move pour mettre à jour la position de la bulle.
- function tempo()
- {
- setTimeout("cache()",1000);
- }
|
script html
<div id="curseur" class="infobulle">
</div>
<IMG NAME="projet6400" SRC="projet640.png" WIDTH="640" HEIGHT="394" BORDER="0" USEMAP="#projet640"/>
<MAP NAME="projet640">
<AREA SHAPE="rect" COORDS="5,0,148,60" HREF="www/doc1.ppt" TARGET="_self" ALT="doc1" onmouseover="montre('un peu de texte, <a href=\'http://www.google.fr\'>lien</b> !');" onmouseout="tempo();">
</MAP>
script css:
.infobulle
{
position: absolute;
visibility : hidden;
border: 1px solid Black;
padding: 10px;
font-family: Verdana, Arial;
font-size: 10px;
background-color: #FFFFCC;
}
Message édité par angelo78 le 22-04-2009 à 10:53:54
