<!--Este codigo ha sido probado con IE 5,6 y 7, Firefox 2.0 y Opera 9.20 y Safari 2-->
<!-- http://www.lawebdelprogramador.com -->
<html>
<head>
<title>Mostrar un div al pasar el raton por encima de un enlace o texto</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;
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 al pasar el raton por encima de un enlace o texto</h1>
<!--
Generamos el enlace y texto (span) con tres eventos del mouse:
onmouseout = en el momento que el raton desaparezca del div,
se escondera el div
onmousemove = miestras el raton se mueva por encima del div, se indica
que se muestre el div.
onmouseover = miestras el raton este encima del div, se indica
que se muestre el div.
-->
<p><a href='#' onmouseover="showdiv(event);" onmousemove="showdiv(event);" onmouseout="javascript:document.getElementById('flotante').style.display='none';">Al pasar por encima veras el mensaje</a></p>
<p style='margin-top:100px;'><span onmouseover="showdiv(event);" onmousemove="showdiv(event);" onmouseout="javascript:document.getElementById('flotante').style.display='none';">Al pasar por encima veras el mensaje</span></p>
<div id="flotante">
Código de La Web del Programador
<br />http://www.lawebdelprogramador.com
<br /><span id="posicion"></span>
</div>
</body>
</html>
Crear cuenta
Ver ejemplo