Hola compañero
marcosr
Para lo que tienes que hacer, lo único que necesitas es posicionar la capa (propiedad TOP y propiedad LEFT del Style de la capa) posicionarlas en las posiciones X e Y del ratón.
Para que además, te sea útil en páginas con scroll (bastante contenido en la página) debes de tener en cuenta la posición y tamaño del SCROLL de la página.
Parece raro o dificil, pero es tan simple como....
Cita: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="JavaScript1.2" type="text/javascript">
function mostrar(evt)
{
// Capturamos el Evento
var e = (window.event) ? window.event : evt;
X = e.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
// document.documentElement.scrollLeft + document.body.scrollLeft -- Tienen en cuenta la posición HORIZONTAL del Scroll
Y = e.clientY + document.documentElement.scrollTop + document.body.scrollTop;
// document.documentElement.scrollTop + document.body.scrollTop -- Tienen en cuenta la posición VERTICAL del Scroll
document.getElementById("capita").style.left = X + "px";
document.getElementById("capita").style.top = Y + "px";
}
</script>
</head>
<body>
<div id="capita" style="position:absolute;display:inline;top:0px;le ft:200px;width:300px;height:70px;background-color:red">Esta es la capa que se moverá</div>
<a href="#" onmouseover="mostrar(event)">Primer Enlace</a><br><br><br><br><br><br><br><br>
<a href="#" onmouseover="mostrar(event)">Segundo Enlace</a><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br>
<a href="#" onmouseover="mostrar(event)">Tercer Enlace</a><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br>
<a href="#" onmouseover="mostrar(event)">Ultimo enlace</a>
</body>
</html>
Espero que te sea útil.
Si tienes alguna duda,pregunta sin problemas
