Image en infobulle Javascript

[merkur_zombie]

Soir'

 

Voila, je voudrais savoir comment on fait pour afficher une image dans une de ces especes d'infos bulles (comme la propriété alt dans une balise <img>).

 

J'ai vu que c'était possible sur http://www.smartftp.com/download/, quand on passe la souris au dessus des liens pour télécharger.

 

Alors j'ai pris le code qui fait ca, mais je ne le comprends pas -_-

 

Voila sur le lien:

<a href="/get/SFTPSetup.exe" onmouseover="ShowTooltip();" onmouseout="HideTooltip();">Installation en ligne</a>

 

Voici la fonction ShowToolTip

	function ShowTooltip()
{
 if(!isIE())
 	return;
 
 var tooltipOBJ = eval("document.all['tt2']");
 var tooltipOffsetTop = tooltipOBJ.scrollHeight + 35;
 //var testTop = (document.body.scrollTop + event.clientY) - tooltipOffsetTop;
 //var testTop = event.clientY + 20;  
 var testTop = (document.body.scrollTop + event.clientY) + 20;  
 var testLeft = event.clientX - 50;
 var tooltipAbsLft = (testLeft < 0) ? 10 : testLeft;
 var tooltipAbsTop = (testTop < document.body.scrollTop) ? document.body.scrollTop + 10 : testTop;
 tooltipOBJ.style.posLeft = tooltipAbsLft;
 tooltipOBJ.style.posTop = tooltipAbsTop;
 tooltipOBJ.style.visibility = "visible";
}

 

 

Et voila HideToolTip

	function HideTooltip()
{
 var tooltipOBJ = eval("document.all['tt2']");
 tooltipOBJ.style.visibility = "hidden";
}

 

 

Qqun pourrait m'expliquer un peu SVP ^^

Modifié le 17 juin 2004 par merkur_zombie

[KewlCat]

Salut !

 

J'ai modifié le titre de ton topic, parce qu'il ne s'agit pas de JAVA mais de JAVASCRIPT (rien à voir).

Ensuite, ton script ne fonctionne qu'avec IE (il suffit de voir l'utilisation qui est faite de "document.all").

Si tu veux un (une ?) infobulle sur un lien ou sur un autre objet, tu peux utiliser l'attribut TITLE de la balise (c'est dans la norme HTML4, donc ça fonctionne sur tous les navigateurs).

 

Dans le principe, pour pouvoir utiliser comme "infobulle" n'importe quel bout de html, il faut avoir une DIV qui "suit" la souris (donc dans le document.onmousemove il faut ajouter un bout de code qui change les coordonnées de la DIV), et la faire afficher lorsque la souris passe sur l'élément correspondant (c'est à ça que servent les visibility="hidden" et visibility="visible")

Au passage, il vaut mieux utiliser display="none" / display="block" plutôt que visibility parce que ça fait déconner la mise en page (l'élément a beau ne pas être visible, il est toujours là)

[merkur_zombie]

Dac merci!

 

Je vais chercher dans cette direction ^_^

 

Bonne soirée!

[KewlCat]

Tiens, en supposant que tu as une <div id="divInfobulle"> dans ton document, voici comment lui faire suivre le curseur de la souris (pour navigateur compatible DOM, ou IE) :

    var xMousePos = 0; // Horizontal position of the mouse on the screen
   var yMousePos = 0; // Vertical position of the mouse on the screen
   var xMousePosMax = 0; // Width of the page
   var yMousePosMax = 0; // Height of the page

   var topOffset = 0;
   var leftOffset = 0;

   var idInfobulle = document.getElementById("divInfobulle");

   function captureMousePosition(e) {
     if (document.all) {
       xMousePos = window.event.x + document.body.scrollLeft;
       yMousePos = window.event.y + document.body.scrollTop;
       xMousePosMax = document.body.clientWidth + document.body.scrollLeft;
       yMousePosMax = document.body.clientHeight + document.body.scrollTop;
     } else if (document.getElementById) {
       xMousePos = e.pageX;
       yMousePos = e.pageY;
       xMousePosMax = window.innerWidth + window.pageXOffset;
       yMousePosMax = window.innerHeight + window.pageYOffset;
     }

       idInfobulle.style.top = "" + yMousePos - (topOffset ? topOffset : 6) + "px";
       idInfobulle.style.left = "" + xMousePos - (leftOffset ? leftOffset : 25) + "px";
       if (topOffset > yMousePos) {
           idInfobulle.style.top = 0;
       }
       if (leftOffset > xMousePos) {
           idInfobulle.style.left = 0;
       }
   }

   document.onmousemove = captureMousePosition;

[merkur_zombie]

merci bien ^^ je testerai ca plus tard parce que la... ben c'est un peu les exams et je dois apprendre 3 ans de cours en qq jours -_-