Positionnement div au-dessus de l'image de manière dynamique via le survol de la souris

Je souhaite afficher l'image div ci-dessus de sorte que le sommet de div soit aligné avec le curseur.
Lorsque le curseur est déplacé, le div doit également être déplacé (juste maintenant verticalement).
Dans IE (pur javascript s'il vous plaît).Positionnement div au-dessus de l'image de manière dynamique via le survol de la souris

<head runat="server"> 
    <title></title> 
    <style type="text/css"> 
     #ToolTip{position:absolute; width: 200px;background-color:Lime; top: 0px; left: 0px; z-index:400;visibility:hidden;} 
    </style> 
    <script language="javascript" type="text/javascript"> 
     function On() { 

      MoveToolTip("ToolTip", "event.y", "event.x"); 
      document.getElementById('ToolTip').style.visibility = 'visible'; 

     } 
     function Off() { 

      MoveToolTip("ToolTip", 0, 0); 
      document.getElementById('ToolTip').style.visibility = 'hidden'; 
     } 

     function MoveToolTip(layerName, top, left) { 
       document.getElementById(layerName).style.top = (eval(top)); 
      //document.getElementById(layerName).style.left = (eval(left) - 360); 

     } 

    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <div id="ToolTip" >This is a test </div> 
     <a href="www.www.com"><img alt="mg" border="0" src="http://www.google.com/logos/holiday09_4.gif" onmouseout="Off();" onmouseover="On();" /></a> 

    </div> 
    </form> 
</body> 
</html>

Source

2009-12-24 kenny

est ici une solution possible pour votre problème:

<html> 
<head runat="server"> 
<title></title> 
<style type="text/css"> 
    #ToolTip { 
     position:absolute; 
     width: 200px; 
     background-color:Lime; 
     z-index:400; 
     visibility:hidden; 
     cursor: pointer; 
    } 
</style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <div id="ToolTip">This is a test</div> 
     <a href="www.www.com"> 
      <img alt="mg" id="base-img" border="0" src="http://www.google.com/logos/holiday09_4.gif" /> 
     </a> 
    </div> 
    </form> 
<script language="javascript" type="text/javascript"> 
    function showToolTip(e) { 
     e = e || window.event; // Older versions of IE handle events funny 
     // Added code that compensates for the window's scroll position. 
     var top = e.clientY + (window.pageYOffset || document.body.scrollTop) + 5; 
     moveToolTip("ToolTip", top, e.clientX); 
     document.getElementById('ToolTip').style.visibility = 'visible'; 

     // We need to cancel the center to ensure that the onmousemove event 
     // on the body element doesn't get triggered 
     e.cancelBubble = true; 
     if (e.stopPropagation) { e.stopPropagation(); } 
     return false; 
    } 
    function hideToolTip() { 
     moveToolTip("ToolTip", 0, 0); 
     document.getElementById('ToolTip').style.visibility = 'hidden'; 
     return false; 
    } 

    function moveToolTip(layerName, top, left) { 
     document.getElementById(layerName).style.top = (top + "px"); 
    } 

    document.onmousemove = hideToolTip; 
    document.getElementById("ToolTip").onmousemove = showToolTip; 
    document.getElementById("base-img").onmousemove = showToolTip; 
</script> 
</body> 
</html>

choses que je changé:

Gave fonctions les rendre plus lisibles:
- On-showToolTip NOUVELLE APPELLATION
- Renommé Off-hideToolTip
La variable event est maintenant passé à la fonction showToolTip. Cela est nécessaire pour obtenir le x de curseur, la position y
code a ajouté que compensé la position de défilement de la fenêtre
Ajouté return false-showToolTip et hideToolTip
Remplacée onmouseout et onmouseover à l'événement onmousemove plus largement pris en charge
Got débarrasser du scintillement en ajoutant ce qui suit:
- Ajouté onmousemove événement à document, qui appelle hideToolTip
- événement Ajouté onmousemove à la pointe de l'outil div, qui appelle showToolTip
communiqué + "px" à la cession .style.top. Certains navigateurs sont confus si vous affectez un entier à un style.
Déclarations de script déplacées vers le bas de la page.
affectations d'événements Déplacé à javascript et supprimés onmousemove attributs de la balise
Ajouté le style cursor: pointer à la pointe de l'outil. Cela supprime le scintillement du curseur.
Changé format de code

J'ai aussi posté un exemple de travail: http://www.the-xavi.com/static/so-hover-div.html

Hope this helps.

Source

2009-12-24 15:54:59 Xavi

Cela ne déplace pas div comme je déplace le curseur au-dessus de l'image. – kenny

et aussi document.body.scrollTop ne fonctionne pas, au moins pas dans IE8 – kenny

J'ai ajouté à votre solution onmousemove event (similaire à la suggestion de Can Berk Güder), et j'ai changé document.body.scrollTop en document.documentElement.scrollTop ; Maintenant, le problème est scintillement – kenny

Vous pouvez facilement obtenir quelque chose comme ceci en utilisant jQuery et le plugin qTip

Edit: Le problème avec le code javascript est que vous n'êtes pas référencez positions d'écran réelles dans votre fonction de déplacement, juste le texte. Vous devez obtenir la position réelle du curseur dans la fonction on/off pour la passer comme un nombre à la fonction de déplacement.

Source

2009-12-24 15:29:22 Ariel

Je ne veux pas ça, pur JS s'il vous plaît. – kenny

+1, s'il existe un plugin stable pour jQuery capable de gérer cela, il a fait ses preuves pour épargner beaucoup de douleur. –

Lien mis à jour vers qTipe (qui est largement utilisé et est plutôt bon) et essayé de répondre à la question sans jQuery – Ariel

Vous pouvez optimiser ceci pour éviter le scintillement.

<html> 
 
<head> 
 
<style type="text/css" media="screen"> 
 
#ToolTip { 
 
\t position: absolute; 
 
\t visibility: hidden; 
 
\t padding: 5px; 
 
\t background-color: red; 
 
} 
 
</style> 
 
<script type="text/javascript" charset="utf-8"> 
 

 
function Move(e) { 
 
\t MoveToolTip("ToolTip", e.x, e.y); 
 
} 
 

 
function On(e) { 
 
\t MoveToolTip("ToolTip", e.x, e.y); 
 
\t document.getElementById("theImage").onmousemove = Move; 
 
\t document.getElementById("ToolTip").style.visibility = 'visible'; 
 
} 
 

 
function Off(e) { 
 
\t document.getElementById("theImage").onmousemove = null; 
 
\t document.getElementById("ToolTip").style.visibility = 'hidden'; 
 
} 
 

 
function MoveToolTip(layerName, x, y) { 
 
\t document.getElementById(layerName).style.left = x + 'px'; 
 
\t document.getElementById(layerName).style.top = y + 'px'; 
 
} 
 

 
function init() { 
 
\t document.getElementById("theImage").onmouseover = On; 
 
\t document.getElementById("theImage").onmouseout = Off; 
 
} 
 
</script> 
 
</head> 
 
<body onload="init();"> 
 
    <div> 
 
     <div id="ToolTip">This is a test</div> 
 
     <a href="www.www.com"><img id="theImage" alt="mg" border="0" src="http://www.google.com/logos/holiday09_4.gif" /></a> 
 
    </div> 
 
</body> 
 
</html>

Source

2009-12-24 15:44:21

Bien fait. Vous avez même séparé le câblage de l'événement ... :) – Ariel

que voulez-vous dire par l'optimisation? – kenny

Je reçois une erreur (à l'intérieur de la fonction On): erreur d'exécution de Microsoft JScript: 'x' est nul ou pas un objet – kenny

Positionnement div au-dessus de l'image de manière dynamique via le survol de la souris

Répondre

Questions connexes