<!--Este codigo ha sido probado con IE 7, Firefox 2.0 y Opera 9.20-->
<!-- http://www.lawebdelprogramador.com -->
<html>
<head>
<title>Mostrar un div en la posición del ratón</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;
//Si no utilizamos IE capturamos el evento del mouse
if (!IE) document.captureEvents(Event.MOUSEMOVE)
var tempX = 0;
var tempY = 0;
if(IE)
{ //para IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}else{ //para netscape
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;
document.getElementById('flotante').style.top = (tempY+margin);
document.getElementById('flotante').style.left = (tempX+margin);
document.getElementById('flotante').style.display='block';
return;
}
-->
</script>
</head>
<body>
<h1>Mostrar un div en la posición del ratón</h1>
<p><a href='#' onclick="showdiv(event);">Pulsa para ver el div. Depende de donde pulses sobre el enlace, se mostrara la capa.</a></p>
<!--mostramos el enlace para pulsar y visualizar el div-->
<p style='margin-top:100px;'><a href='#' onclick="showdiv(event);">Pulsa para ver el div. Depende de donde pulses sobre el enlace, se mostrara la capa.</a></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