Ubicación (eje y), se enviaría la variable y nos mostraría una capa en el lugar.

marcosr · #1 (**permalink**) 07/12/2006, 20:00

Hola, para decir verdad, me interesa muchísimo javascript pero no estoy ducho en el y al mínimo error me cierro por lo que les pido que me ayuden

Tengo una función que creé yo (

) que lo que hace es mostrar o ocultar una capa modificando el valor visibility de CSS. Bien, esto me funciona perfectamente en páginas que no se moverán ni más para arriba ni más para abajo ya que al momento de trabajar con mi foro, me doy cuenta de que esto no me sirve para los mensajes que aparecen más abajo ya que la capa aparecería arriba y se perdería o más bien nunca sería vista... Para solucionar esto, se me ha ocurrido averiguar a que distancia en el eje Y se encuentra el link para así enviar este valor por la función y hacer aparecer la capa a esa altura.

Es esto posible?

De no serlo, se les ocurre otra manera de hacer algo tan efectivo?

Desde ya muchísimas gracias !

Saludos !

el_javi · #2 (**permalink**) 09/12/2006, 13:12

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> 
<a href="#" onmouseover="mostrar(event)">Segundo Enlace</a> 
<a href="#" onmouseover="mostrar(event)">Tercer Enlace</a> 
<a href="#" onmouseover="mostrar(event)">Ultimo enlace</a>

</body>
</html>

Espero que te sea útil.

Si tienes alguna duda,pregunta sin problemas