Supprimer Javascript Tooltip Offset pour Nicer Hover Grow Effet

Question

J'essaie d'accomplir quelque chose et j'apprécierai toute l'aide fournie!

J'ai un code d'info-bulle qui lors du survol d'une image, l'image apparaît dans l'info-bulle avec une position de décalage via JS. Au lieu de décaler la position de l'image survolée dans l'info-bulle, je souhaite que l'image dans l'info-bulle s'affiche sans décalage, EXACTLY like the hover effect you see in this example. J'ai besoin de la position de l'infobulle pour ne pas être décalée du tout, juste être exactement au-dessus de l'image. Je ne suis pas sûr comment accomplir ceci puisque le code d'exemple utilise css et j'en ai besoin fonctionnant avec cette info-bulle dans JS.

Voici le code infobulle:

too = tooo = bi = an = null; document.onmousemove = document.onmouseover = toolt; 
function toolt(a) { 
if(bi) { 
    y = bi.offsetTop+bi.height-20; 
    x = bi.offsetLeft+bi.width-12; 
} else { 
    y = (document.all) ? window.event.y + document.body.scrollTop : a.pageY; 
    x = (document.all) ? window.event.x + document.body.scrollLeft : a.pageX; 
} 
a = window.innerHeight ? window.innerHeight : document.body.offsetHeight; 
b = window.innerWidth ? window.innerWidth : document.body.offsetWidth; 
if (too != null) { 
    if(too.offsetWidth+x+35-document.body.scrollLeft > b) x=document.body.scrollLeft+b-too.offsetWidth-35; too.style.left = (x+12)+"px"; 
    if(too.offsetHeight+y+40-document.body.scrollTop > a) y=y-too.offsetHeight-30; too.style.top = (y+20)+"px"; } 
} 
function htoo(i) { if(too) too.style.display = "none"; if(bi) bi.style.display = an ? "block" : "none"; tooo = false;} 
function stoo(i) { if(tooo) tooo.style.display = "none"; if(bi) bi.style.display = an ? "block" : "none"; too = tooo = document.getElementById(i); too.style.display = "block"; if(bi = document.getElementById(i+"b")) bi.style.display="block"; 
} 

Comment puis-je arriver avec le code donné, des idées?

Answer 1

Vous pouvez certainement l'améliorer, mais voici un preuve de concept.
Note: Votre style Les images doivent être position: relative

Utilisation (Demo)

FancyZoom("container"); 

Constructor

function FancyZoom(container, options) { 
    container = container || document; 
    if (typeof container == "string") { 
    container = document.getElementById(container); 
    } 

    function isNodeName(el, name) { 
    return el.nodeName.toLowerCase() === name; 
    }  

    function getTarget(e) { 
    e = e || window.event; 
    return e.target || e.srcElement; 
    } 

    // image {mouseover} event handler (delegated) 
    container.onmouseover = function(e) { 
    var el = getTarget(e); 
    if (isNodeName(el, "img")) { 
     zoomIn(el); 
     // image {mouseout} event handler 
     el.onmouseout = function(e) { 
     zoomOut(el); 
     el.onmouseout = null; 
     }; 
    } 
    }; 
} 

animation^(emile.js)

function zoomIn(thumb) { 
    thumb.style.zIndex = 10; 
    emile(thumb, 
     "width:" + 174 + "px;" + 
     "height:" + 174 + "px;" + 
     "margin-left:" + -37 + "px;" + 
     "margin-top:" + -37 + "px;", 
     { duration: 200 } 
    ); 
} 

function zoomOut(thumb) { 
    thumb.style.zIndex = 1; 
    emile(thumb, 
     "width:" + 100 + "px;" + 
     "height:" + 100 + "px;" + 
     "margin-left:" + 0 + "px;" + 
     "margin-top:" + 0 + "px;", 
     { duration: 100 } 
    ); 

} 

Tested On: IE7 +, FF2 +, Safari 4+, Chrome, Opera