Foros del Web - Ver Mensaje Individual

emprear · #4 (**permalink**) 20/07/2012, 12:07

Al parecer lo que querés es que cuando una capa sea visible la otra se oculte, podés hacer algo así

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>mostrar oculta capas</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
p{
font-weight: bold;
font-size: 11pt;
width: 180px;
cursor: pointer;
font-family: arial, serif;
padding: 5px;
border: dotted 1px #554F9D;
margin-bottom: 2px;
margin-top: 3px;
background-color:white;
}
#Uno,#Dos,#Tres{
width: 180px;
font-family: arial, serif;
padding: 15px 5px;
border: dotted 1px #554F9D;
background-color:#A3AD76;
font-size: 10pt;
margin-top: 3px;
margin-bottom:20px;
}
 
#Uno{
display: block;
}
 
#Dos, #Tres{
display: none;
}
 
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function contenido(cual){
var capas = new Array("Uno", "Dos", "Tres");
var anterior;
var i;
var e;
 
    for(i in capas){
    e = document.getElementById(capas[i]);
        anterior = e.previousSibling;
        while(anterior && anterior.nodeType != 1){
        anterior = anterior.previousSibling;
        }
    capas[i] == cual?e.style.display='block':e.style.display='none';    
 
}
}
//]]>
</script>
</head>
<body>
 
<div id="Uno">Texto uno</div>
 
<div id="Dos">Texto dos</div>
 
<div id="Tres">Texto tres</div>
 
<p onclick="contenido('Uno')" >uno</p>
<p onclick="contenido('Dos')" >dos</p>
<p onclick="contenido('Tres')" >tres</p>
</body>
</html>

En el ejemplo, usé párrafos en lugar de imágenes, pero es lo mismo, el parámetro que se pasa a la función es el id de la capa que debe mostrarse (las otras las oculta)
Por defecto, la capa uno está visible. Si querés preservar el espacio generado por el alto de las capas, usá la propiedad visibility y no la propiedad display.
Una sugerencia final, si usás eventos de javascript, es redundante e innecesario usar el pseudoprotocolo javascript, eso en todo caso cuando llamas una función en un <a href="javascript...">xxx</a

Saludos