intercambiar un div por otro

djonios · #1 (**permalink**) 04/05/2011, 15:26

Buenas tardes, espero que alguien pueda ayudarme con algo que no he podido solucionar y es lo siguiente:

tengo una galeria de imagenes pequeñas y cada imagen se encuentra dentro de un div, necesito que cuando yo ponga el mouse sobre la imagen aparezca otro div en esa misma posicion por encima con una pequeña descripcion osea otro div

tengo este java pero no me funciona bien

<script>
function ver(ide,visible) {
obj = document.getElementById(ide);
obj.style.display = (visible)?'block':'none';
}

</script>

<body>

<div class="a" id="a" style="height:197px; width:296px; z-index:2; position:absolute;"><a href="#" onMouseOut="ver('capa1',false); return false" onMouseOver="ver('capa1',true); return false" ><img src="images/clientes/sm_01.jpg" width="296" height="197" border="0" id="Image1" /></a>
<div id="capa1">en este div esta mi texto</div>
</div>

</body>

/* y este es mi div en la hoja de estilos */

#capa1 {
position:absolute;
width:150px;
height:25px;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
z-index:4;
top: 20px;
left:10px;
float: left;
}

y aca dejo un link para mostrar que es lo que quiero lograr

http://www.futurebrand.com/work/case-study-vault/

agradezco de antemano quien pueda ayudarme

kaninox · #2 (**permalink**) 04/05/2011, 15:34

yo tuve que hacer lo mismo hace poco te dejo el link : http://www.forosdelweb.com/f53/imagenes-capa-905854/
tambien hay otra solucion aqui : http://www.forosdelweb.com/f13/cambi...n-link-905579/

espero te sirva.

djonios · #3 (**permalink**) 05/05/2011, 06:54

Gracias kaninox

pero hay algo que no entiendo este java que tengo me puede servir? si fuera asi tendria que entrar a editar la funcion osea:

<script>
function ver(ide,visible) {
obj = document.getElementById(ide);
obj.style.display = (cambia_capa)?'block':'none';
}

</script>

omarMusic · #4 (**permalink**) 05/05/2011, 08:43

Holas, por cierto no es java es javascript, son cosas diferentes, bueno solo tendrias q hacer algunos cambios en el css y html, y tu funcion js es válida:

Código HTML:

Ver original<html>
<head>
<script type="text/javascript">
function ver(ide,visible) {
obj = document.getElementById(ide);
obj.style.display = visible?'block':'none';
}
</script>
<style type="text/css">
#capa1 {
position:relative;
margin-top: -197px;
background: #000;
color:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
}
#a a{display: block;}
#a, .a, #capa1, img {height:197px; width:296px;}
</style>
</head>
<body>
<div id="a" class="a">
<a href="#" onMouseOut="ver('capa1',false)" onMouseOver="ver('capa1',true)">
<img src="gato.jpeg" border="0" id="Image1" />
<div id="capa1" style="display:none">en este div esta mi texto</div>
</a>
</div>
</body>
<html>

Saludos!

djonios · #5 (**permalink**) 06/05/2011, 07:21

Omar music Muchas gracias!!

me funcionó a la perfeccion