ubicar div debajo del link desde donde se activo

lexus · #1 (**permalink**) 30/07/2010, 07:45

hola

tengo una capa <div>

la cual hago aparecer y desaparecer cuando le paso mouseover y mouseout
sobre varios links

algo asi

link1 -- link2 -- link3 -- link4

ya tengo la forma de ocultarlo y mostrarlo con estilos
pero el div siempre me aparece en una posicion fija y mi idea es qeu aparezca exactamente debajo de donde se le paso el mouse al link

es decir qeu si paso el mouse sobre el link 3 se ubique la capa debajo del link3 y si lo paso del link1 se ubique debajo del link1

alguien sabe como hacer esto?

Adler · #2 (**permalink**) 30/07/2010, 08:13

Hola

Sería algo así. Con la primera función sabemos donde está posicionado el elemento sobre el que se ha producido el evento y en la segunda usamos el top y left para mostrar la capa en las coordenadas donde está el link. Claro está, has de sumarle o restarle pixles

Código Javascript:

Ver originalfunction PosAbsolutaElemento(element)  {
if (typeof element == "string")
element = CalReservas.captura_objeto(element)
if (!element) return { top:0,left:0 };
var y = 0;
var x = 0;
while (element.offsetParent) {
x += element.offsetLeft;
y += element.offsetTop;
element = element.offsetParent;
}
return {top:y,left:x};
}
 
function MuestraOcultaDiv(elElem) {
var PosElemento = PosAbsolutaElemento(elElem);
posicionInicialLeft = parseInt(PosElemento.left);
posicionInicialTop = parseInt(PosElemento.top);
......
}

Suerte

zerokilled · #3 (**permalink**) 30/07/2010, 11:48

si interesas, la posicion de los DIVs lo puedes hacer desde css. incluso mostrar y esconder las capas lo puedes desde css, pero ya eso depende de como quieras manejarlo, si mantenerse visible luego de pasar el raton.

lexus · #4 (**permalink**) 30/07/2010, 12:37

Hola. Tienes un ejemplo de como hacerlo con css?

zerokilled · #5 (**permalink**) 30/07/2010, 13:07

depende de la estructura de tu html. si tienes los enlaces en una lista, puedes poner el contenido -los DIVs- dentro de la lista. en este ejemplo, ademas de apreciar la posicion, tambien hace el efecto de mostrar y esconder. pero como ya mencione, este ultimo lo implementas de acuerdo a lo que necesites. concentrate particularmente en las primeras dos reglas.

Código:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test Development</title>
<script type='text/javascript'>

</script>
<style type='text/css'>
ul li{
position:relative;
float:left;
width:4em;
border-bottom:1px solid blue;
list-style:none;
}

ul li div{
position:absolute;
left:0;
display:none;
border:1px solid blue;
width:30em;
height:30em;
}

a{
display:block;
text-align:center;
text-decoration:none;
}

li:hover div{
display:block;
}
</style>
</head>

<body>
<ul>
<li><a href="">link</a> <div>content</div></li>
<li><a href="">link</a> <div>content</div></li>
<li><a href="">link</a> <div>content</div></li>
</ul>

</body></html>

richardinj · #6 (**permalink**) 07/12/2010, 00:11

El problema de eso es que cuando coloco algo con un enlace dentro del DIV hereda lamisma propiedad del enlace principal... como hago para que esto no ocurra..? a pesar de que le pongo una clase, igual sigue saliendo el enlace con el formato general...