Mostrar capa al pasar sobre imagen

Andariel · #1 (**permalink**) 06/08/2006, 13:13

hola, creo que esta taréa debe de ser algo ya común para muchos diseñadores, pero yo nunca lo he hecho y la verdad la información que he encontrado no ha sido muy clara a mi paracer...

Lo que quiero es básicamente que cuando yo pase el cursor sobre una imagen, se despliege una capa con la información que yo necesite, imagenes etc. De preferencia que la capa se mueva con el mouse.

Pueden ver perfectamente este efecto en la página de http://www.templatemonster.com/

cuando te posicionas sobre cualquiera de las mini-imagenes de los diseños verán lo que pretendo lograr.

cualquier aporte será de gran ayuda.

fer10 · #2 (**permalink**) 06/08/2006, 13:16

es bien facil, solo necesitas hacer uno de capas con position relatvie con z-index alto y usa javascript para saber la posicion de mouse.

pero para la posiicon de mouse todo es un desmadre en cuestion de compatiblidad con navegadores asi que te paso el codigo que yo uso

Código HTML:

<head>
<title>Coordenadas</title>
<script language="JavaScript">
<!--
function mouseMove(e) {
document.getElementById("ejeX").value = (document.all)? event.x+document.body.scrollLeft : e.pageX
document.getElementById("ejeY").value = (document.all)? event.y+document.body.scrollTop : e.pageY
}
function init() {
if (!document.all) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = mouseMove;
}
// -->
</script>
</head>

<body onload="init()">
Eje X <input type="text" id="ejeX" value="0" size="4">
<br>Eje Y <input type="text" id="ejeY" value="0" size="4">
</body>

</html>

y ya mueves la capa cada vez que mueva el mosue determinados pixeles a lado y asi sececivamente

Andariel · #3 (**permalink**) 06/08/2006, 20:25

muchas gracias amigo, lo probaré ahora y te enseño como me quedó...