<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--Este codigo ha sido probado con IE 7, Firefox 2.0, Safari 3.0 y Opera 9.26-->
<!-- http://www.lawebdelprogramador.com -->
<html>
<head>
<title>Mostrar un div en la posición del ratón con DOCTYPE 4.01</title>
<style type="text/css">
/*order ok: link,visited,hover,active*/
A:link, A:visited, A:hover, A:active {color:#0000ff;}
#flotante
{ position: absolute;
display:none;
font-family:Arial;
font-size:0.8em;
width:220px;
border:1px solid #808080;
background-color:#f1f1f1;
}
</style>
<script type="text/javascript">
<!--
//Funcion que muestra el div en la posicion del mouse
function showdiv(event)
{
//determina un margen de pixels del div al raton
margin=5;
//La variable IE determina si estamos utilizando IE
var IE = document.all?true:false;
var tempX = 0;
var tempY = 0;
//document.body.clientHeight = devuelve la altura del body
if(IE)
{ //para IE
//event.y|event.clientY = devuelve la posicion en relacion a la parte superior visible del navegador
//event.screenY = devuelve la posicion del cursor en relaciona la parte superior de la pantalla
//event.offsetY = devuelve la posicion del mouse en relacion a la posicion superior de la caja donde se ha pulsado
tempX = event.x
tempY = event.y
if(window.pageYOffset){
tempY=(tempY+window.pageYOffset);
tempX=(tempX+window.pageXOffset);
}else{
tempY=(tempY+Math.max(document.body.scrollTop,document.documentElement.scrollTop));
tempX=(tempX+Math.max(document.body.scrollLeft,document.documentElement.scrollLeft));
}
}else{ //para netscape
//window.pageYOffset = devuelve el tamaño en pixels de la parte superior no visible (scroll) de la pagina
document.captureEvents(Event.MOUSEMOVE);
tempX = event.pageX;
tempY = event.pageY;
}
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}
//modificamos el valor del id posicion para indicar la posicion del mouse
document.getElementById('posicion').innerHTML="PosX = "+tempX+" | PosY = "+tempY;
//window.alert(event.pageYOffset+" - "+document.body.pageYOffset+" - "+screen.pageYOffset+" - "+this.pageYOffset+" - "+window.pageYOffset);
document.getElementById('flotante').style.top = (tempY+margin)+"px";
document.getElementById('flotante').style.left = (tempX+margin)+"px";
document.getElementById('flotante').style.display='block';
return;
}
-->
</script>
</head>
<body>
<h1>Mostrar un div en la posición del ratón con DOCTYPE 4.01</h1>
<p onclick="showdiv(event);">Pulsa para ver el div. Depende de donde pulses sobre el texto, se mostrara la capa.</p>
<!--mostramos el enlace para pulsar y visualizar el div-->
<p style='margin-top:100px;' onclick="showdiv(event);">Pulsa para ver el div. Depende de donde pulses sobre el texto, se mostrara la capa.</p>
<!--
Generamos el div con tres eventos del mouse:
onmouseout = en el momento que el raton desaparezca del div,
se escondera el div
onclick = si se realiza unclick en el div, se escondera el div
onmouseover = miestras el raton este encima del div, se indica
que se muestre el div. No se si es del todo necesaria esta
casilla...
-->
<div id="flotante" onmouseout="this.style.display='none'" onclick="this.style.display='none'" onmouseover="this.style.display='block'">
<a href="http://www.lawebdelprogramador.com" target="_blank">Código de La Web del Programador</a>
<br /><span id="posicion"></span>
</div>
</body>
</html>
Crear cuenta