Problemas con mi codigo (mal hecho)

moro666 · #1 (**permalink**) 20/07/2012, 10:38

Código HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
<!--
#todo {
border: 1px solid #EAEAEA;  /* Borde de la galería */
padding: 10px;
background: white;  /* Fondo de la galería */
width: 410px;  /* Ancho de la galería */
height: 300px;  /* Alto de la galería */
}
#heroe1 {
border-radius: 3px;
border: 1px solid #F2F2F2;  /* Borde de la imagen */
padding: 3px;
width: 120px; /* Ancho de la imagen */
height: 120px; /* Alto de la imagen */
display:block;
}
#heroe2 {
border-radius: 3px;
border: 1px solid #F2F2F2;  /* Borde de la imagen */
padding: 3px;
width: 120px; /* Ancho de la imagen */
height: 120px; /* Alto de la imagen */
display:none;
}
.miniatura {
width:  60px;  /* Ancho de las miniaturas */
height:  60px;  /* Alto de las miniaturas */
float: left;
cursor: pointer;
padding: 5px;
}
-->
</style>
</head>

<body>
<div id="todo">
<div>
<div id="heroe1">Contenido primer heroe</div>
<div id="heroe2">Contenido segundo heroe</div>
<div>
<img class="miniatura" onclick="javascript:document.getElementById('heroe1').style.display='block';javascript:document.getElementById('heroe2').style.display='none';
" src="URL-IMAGEN-1" />
<img class="miniatura" onclick="javascript:document.getElementById('heroe2').style.display='block';javascript:document.getElementById('heroe1').style.display='none';" src="URL-IMAGEN-2" />

</div>
</div>
</body>
</html>

Esto es lo que casi yo solito he podido hacer, y funciona bien. Si os fijais hay 2 botones que son imagenes y se intercambian 2 divs segun en que imagen clickees.
Vale, ahora mi problema, yo quisiera poner no 2, sino unos cuantos mas, asi que esto ya no me es util, alguna idea?!?

Gracias de antemano!

maycolalvarez · #2 (**permalink**) 20/07/2012, 11:28

no había necesidad de repetir el Post: http://www.forosdelweb.com/f13/probl...dades-1004597/, consulte las políticas del foro, no siempre las respuestas serán inmediatas, somos muchos en el foro, de diferentes regiones.

para hacer lo que quiere, existen diversas formas:

1 - recorrer el DOM ocultando todas las capas similares y luego mostrar la indicada, puede utilizar document.getElementsByTagName(), o con un fw como jQuery buscar por clases CSS.

2 - tener cada ID de las capas en un arrat JS y recorrerlo para ocultar todas y mostrar la indicada.

Lynxcraft · #3 (**permalink**) 20/07/2012, 11:31

Código PHP:

  <!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin título</title> 
<style type="text/css"> 
<!-- 
#todo { 
border: 1px solid #EAEAEA;  /* Borde de la galería */ 
padding: 10px; 
background: white;  /* Fondo de la galería */ 
width: 410px;  /* Ancho de la galería */ 
height: 300px;  /* Alto de la galería */ 
} 
#heroe1 { 
border-radius: 3px; 
border: 1px solid #F2F2F2;  /* Borde de la imagen */ 
padding: 3px; 
width: 120px; /* Ancho de la imagen */ 
height: 120px; /* Alto de la imagen */ 
display:block; 
} 
#heroe2 { 
border-radius: 3px; 
border: 1px solid #F2F2F2;  /* Borde de la imagen */ 
padding: 3px; 
width: 120px; /* Ancho de la imagen */ 
height: 120px; /* Alto de la imagen */ 
display:none; 
} 
.miniatura { 
width:  60px;  /* Ancho de las miniaturas */ 
height:  60px;  /* Alto de las miniaturas */ 
float: left; 
cursor: pointer; 
padding: 5px; 
} 
--> 
</style> 
<script type="text/javascript"> 
    var ListHeroes={}; 
    ListHeroes[0]={id:'heroe1'}; 
    ListHeroes[1]={id:'heroe2'}; 
    ListHeroes[2]={id:'heroe3'}; 
    function showHeroes(id){ 
        for(var a in ListHeroes){ 
            var o = ListHeroes[a]; 
            if(id==a){ 
                document.getElementById(o.id).style.display='block';     
            }else{ 
                document.getElementById(o.id).style.display='none';     
            } 
        } 
    } 
</script> 
</head> 
 
<body> 
<div id="todo"> 
<div> 
    <div id="heroe1">Contenido primer heroe</div> 
    <div id="heroe2">Contenido segundo heroe</div> 
    <div id="heroe3">Contenido tecer heroe</div> 
    <div> 
        <img class="miniatura" onclick="javascript:showHeroes(0)" src="URL-IMAGEN-1" /> 
        <img class="miniatura" onclick="javascript:showHeroes(1)" src="URL-IMAGEN-2" /> 
        <img class="miniatura" onclick="javascript:showHeroes(2)" src="URL-IMAGEN-3" /> 
    </div> 
</div> 
</div> 
</body> 
</html>

a ver si te sirve XDXD

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