Affichage d'une Infobulle

Affichage d'une Infobulle - HTML/CSS - Programmation

Marsh Posté le 22-04-2009 à 10:52:08    

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)  :pt1cable:  
J'aimerai donc afficher l'infobulle au bon endroit et pouvoir cliquer sur le lien  
 
voici le code :  
script javascript

Code :
  1. function GetId(id)
  2. {
  3. return document.getElementById(id);
  4. }
  5. var i=false; // La variable i nous dit si la bulle est visible ou non
  7. function move(e)
  8. {
  9. if(i) // Si la bulle est visible, on calcul en temps reel sa position ideale
  10. {
  11.  if (navigator.appName!="Microsoft Internet Explorer" ) // Si on est pas sous IE
  12.  {
  13.   GetId("curseur" ).style.left=e.pageX + 5+"px";
  14.   GetId("curseur" ).style.top=e.pageY + 10+"px";
  15.  }
  16.  else
  17.  {
  18.   if(document.documentElement.clientWidth>0)
  19.   {
  20.    GetId("curseur" ).style.left=20+event.x+document.documentElement.scrollLeft+"px";
  21.    GetId("curseur" ).style.top=10+event.y+document.documentElement.scrollTop+"px";
  22.   }
  23.   else
  24.   {
  25.    GetId("curseur" ).style.left=20+event.x+document.body.scrollLeft+"px";
  26.    GetId("curseur" ).style.top=10+event.y+document.body.scrollTop+"px";
  27.   }
  28.  }
  29. }
  30. }
  32. function montre(text)
  33. {
  34. if(i==false)
  35. {
  36.   GetId("curseur" ).style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
  37.   GetId("curseur" ).innerHTML = text; // on copie notre texte dans l'élément html
  38.   i=true;
  39. }
  40. }
  41. function cache()
  42. {
  43. if(i==true)
  44. {
  45.  GetId("curseur" ).style.visibility="hidden"; // Si la bulle est visible on la cache
  46.  i=false;
  47. }
  48. }
  50. //document.onmousemove=move; // dès que la souris bouge, on appelle la fonction move pour mettre à  jour la position de la bulle.
  51. function tempo()
  52. {
  53. setTimeout("cache()",1000);
  54. }



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
Reply

Marsh Posté le 22-04-2009 à 10:52:08   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed