Aller au contenu
  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

merkur_zombie

Image en infobulle Javascript

Messages recommandés

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é par merkur_zombie

Partager ce message


Lien à poster
Partager sur d’autres sites

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à)

Partager ce message


Lien à poster
Partager sur d’autres sites

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;

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

  • En ligne récemment   0 membre est en ligne

    Aucun utilisateur enregistré regarde cette page.

×