Problemas con caja que sigue al ratón

CHuLoSoY · #1 (**permalink**) 06/07/2011, 06:47

Hola amigos. Tengo este código:

Código Javascript:

Ver originalfunction sigueme(e) {
    var x = (document.layers || !document.all)? e.pageX : event.x+document.body.scrollLeft;
    var y = (document.layers || !document.all)? e.pageY : event.y+document.body.scrollTop;
    var x2 = x + 10;
    var y2 = y + 10;
    
    document.getElementById('siguelo').style.left=x2+'px';
    document.getElementById('siguelo').style.top=y2+'px';
    
    return true
}
 
 
function muestrame(texto) {
 
    document.onmousemove = sigueme;
    
    document.getElementById('siguelo').innerHTML=texto;
    /*if (navigator.appName=="Microsoft Internet Explorer") {
    
        document.getElementById('siguelo').style.position='absolute';
    
    } else {
    
        document.getElementById('siguelo').style.position='fixed';
    
    }*/
 
    document.getElementById('siguelo').style.display='block';
    if (document.layers) { document.captureEvents(Event.MOUSEMOVE); }
}
 
 
function quitame() {
    document.getElementById('siguelo').style.display='none';
}

Como véis hay un trozo comentado y es que tengo problemas para visualizar la caja que sigue al ratón en internet explorer.

Si la position es absoluta, internet explorer no pilla bien las coordenadas x e y del ratón , en cambio firefox sí, pero para que funcione en los dos tengo que ponerle fixed a firefox, el cual es un problema porque al hacer scroll nunca queda al lado del ratón.

Pueden probarlo aquí:

http://213.60.40.182/gap-dev/index.php

al ponerse encima de los títulos de ARTÍCULOS QUE INTERESAN. El código está en el script Funciones.js

Entonces, cómo hago para que funcione correctamente en todos los navegadores ? Al menos que funcione igual.

Saludos y gracias.

edición:

he probado con esto:

Código Javascript:

Ver originalfunction sigueme(e) {
    var x = e.clientX + 15;
    var y = e.clientY + 15;
    
    document.getElementById('siguelo').style.left = x + 'px';
    document.getElementById('siguelo').style.top = y + 'px';
    
    return true;
}

pero en IE 8 se queda la capa arriba a la izquierda sin solución posible.

Panino5001 · #2 (**permalink**) 06/07/2011, 12:05

Fijate si esto te da alguna idea:

Código PHP:

  <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style>
*{margin:0; padding:0}
#tip{ position:absolute; width:300px; height:30px; border:1px solid #000; background:#C93; font-family:Verdana, Geneva, sans-serif; font-size:10px; padding:5px; top:-1500px}
</style>
<script type="text/javascript">
var ns={};
function addEvent(obj,fun,type){ 
    if(obj.addEventListener){ 
        obj.addEventListener(type,fun,false); 
    }else if(obj.attachEvent){ 
        var f=function(){ 
            fun.call(obj,window.event); 
        } 
        obj.attachEvent('on'+type,f); 
        obj[fun.toString()+type]=f; 
    }else{ 
        obj['on'+type]=fun; 
    } 
}  
function t(id){return document.getElementById(id);}
function showTip(e){
    var x=e.clientX+(self.pageXOffset || (document.body.scrollLeft+document.documentElement.scrollLeft))+10;
    var y=e.clientY+(self.pageYOffset || (document.body.scrollTop+document.documentElement.scrollTop))+10;
    t('tip').style.top=y+'px';
    t('tip').style.left=x+'px';
    var obj=e.srcElement || e.target;
    t('tip').innerHTML=ns[obj.id];
}
function hideTip(){
    t('tip').style.top='-1500px';
}
function addTip(id,txt){
     ns[id]=txt;
     addEvent(t(id),showTip,'mousemove');
     addEvent(t(id),hideTip,'mouseout');
    
}
addEvent(window,function(){
        addTip('uno','ir a google');
        addTip('dos','ir a foros del web');
    },'load');
</script>
</head>

<body>
<div id="tip"></div>
<a id="uno" href="http://google.com">ejemplo 1</a><br />
<a id="dos" href="http://forosdelweb.com">ejemplo 2</a>
</body>
</html>