Div Flotante....

mdavila · #1 (**permalink**) 21/09/2009, 12:29

Hola estoy haciendo un Div Flotante que salta en el evento onmouseover de una imagen, la idea es que salga donde esta la imagen.
Me sale bastante bien pero cuando se hace scroll de la pagina se corre el div y no se como controlarlo.

este es el codigo y desde ya muchas gracias.

function getMouseXY(e) {
if (IE) {
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
} else {
tempX = e.pageX
tempY = e.pageY
}
return true
}

function Show(Ventana)
{
posx = tempX;
posy = tempY;

document.getElementById(Ventana).style.left = posx;
document.getElementById(Ventana).style.top = posy;
document.getElementById(Ventana).style.display="bl ock";
}

function Hide(Div)
{
document.getElementById(Div).style.display="none";
}

<img alt="" src="icono_alertas_azul.gif"
width="26" height="26" align="middle" onmouseover="javascript: Show('DivAlertas')"
onmouseout="javascript: Hide('DivAlertas')"
style=" margin-top:-3px; border-width:0px;"/>

Adler · #2 (**permalink**) 21/09/2009, 13:08

Hola

No entiendo cuando dices "cuando se hace scroll de la pagina se corre el div"

Entiendo que quieres que sea estático. En tal caso elimina la función function getMouseXY(e), elimina también en la función Show(Ventana) estas vars posx = tempX; posy = tempY; y usa position:relative o absolute (lo que mejor te venga)

Suerte

mdavila · #3 (**permalink**) 21/09/2009, 13:25

Claro, quiero que sea estatico a la imagen que le asigno el mouseover.....

No me gusta colocar el valor x e y a mano ya que si modifico la imagen de lugar tengo que cambiar los valores x e y que le paso al javascript pero ta....

Gracias.

Adler · #4 (**permalink**) 21/09/2009, 14:22

Hola

Prueba así

Código javascript:

Ver original<html>
<head>
<script type="text/javascript">
function PosicionAbsolutaElemento(element)  {
    if (typeof element == "string")
        element = document.getElementById(element)
            if (!element) return { top:0,left:0 };
        var y = 0;
        var x = 0;
            while (element.offsetParent) {
                    x += element.offsetLeft;
                    y += element.offsetTop;
                element = element.offsetParent;
     }
    return {top:y,left:x};
 
}
 
function Show(elElemento,Ventana) {
var PosElemento = PosicionAbsolutaElemento(elElemento);
posLeft = parseInt(PosElemento.left);
posTop = parseInt(PosElemento.top);
document.getElementById(Ventana).style.left = posLeft + "px";
document.getElementById(Ventana).style.top = posTop + "px";
document.getElementById(Ventana).style.display="block";
}
 
function Hide(Div)
{
document.getElementById(Div).style.display="none";
}
</script>
</head>
<body>
<div id="DivAlertas"  style="z-index:1000; position:absolute; top:0px; left:0px; overflow:hidden; display:none;">Una Capa</div>
<table border="1px">
<tr height="100px">
<td>Una prueba</td>
</tr>
</table>
<img id="img" alt="" src="icono_alertas_azul.gif" width="26" height="26" align="middle" onmouseover="javascript: Show(this.id,'DivAlertas')" onmouseout="javascript: Hide('DivAlertas')" style=" margin-top:-3px; border-width:0px;"/> 
</body>
</html>

Suerte