Div oculto sobre otro

Buenos dias!

Estoy queriendo lograr lo siguiente, tengo dos div con imagenes direferentes cada div, misma ubicacion ambos. Supongamos que el div 01 este sobre el div 02, tb tengo dos imagenes fuera de estos div que serian los dos botones, al hacer click en el boton 2 me mostraria el div 2, y lo mismo para el boton 1.

Algo asi:



Espero que me entiendan.

Como puedo hacerlo, sin compliaciones? . Algun ejemplo o ayuda? Gracias!

Saludos.

¿Dinamico? Útiliza javascript..

Código HTML :

<script type="text/javascript">
 var cambiar = {
    accion:  function(hide, show){ this.ocultar(hide); this.mostrar(show); },
    ocultar: function(num){ document.getElementById("div"+num).style['display'] = "none"; },
    mostrar: function(num){ document.getElementById("div"+num).style['display'] = "block"; }
 };
</script>

<div id="div1" style="display: none;">Div 1</div>
<div id="div2">Div 2</div>
<button onclick="cambiar.accion(2,1)" >Mostrar 1</button>
<button onclick="cambiar.accion(1,2)" >Mostrar 2</button>

Prueba si eso te sirve.

y como modifico esto para que me sirva apra 3 , 4 o 5 imagenes mas?

ey que chevere esa solución, yo lo hacia un poco mas primitivo, mediante funciones, algo como

Código Javascript :

//para simplificar el cuento, hagamos de cuenta que ya llamé prototype
function ocultar(mostrarEste,ocultarEste){
   $(ocultarEste).style.display="none";
   $(mostrarEste).style.display="block";
}

pero bueno, la solución de ivanfc0o está muchísimo mejor. De hecho me la cojo pa mi también .

justV, mira que en este trocito de código "cambiar.accion(1,2)" los dos datos que están entre paréntesis son cosas que llamamos argumentos, y el orden de los datos se determinan por la configuración que se redacta al generar la instrucción, exactamente en este pedazo de código: "function(hide, show)". Fíjate que el primer argumento corresponde a lo que se oculta y el segundo a lo que se muestra.

No se si quedó claro

Nope, el script que escribí no se puede útilizar para más de 2 imagen puesto que la función es ocultar 1 y mostrar otro. Ya si quieres hacerlo con más divs el código tendría que editarse de una manera más laboriosa.

Yo lo haría así:

Código HTML :

<script type="text/javascript">
 var lista = "listado";
 var mostrar = {
   ocultar: function(){
        var arrayDivs = document.getElementById(listado).getElementsByTagName("div");
        var totalDivs = arrayDivs.length;
          for(i=0;i<totalDivs;i++){ arrayDivs[i].style['display'] = "none"; }
   },
   mostrar: function(num){ document.getElementById("div"+num).style['display'] = "block"; },
   accion: function(num){
            this.ocultar(); this.mostrar(num);
  }
 }
</script>

<div id="listado">
 <div id="div1">Div 1</div>
 <div id="div2">Div 2</div>
 <div id="div3">Div 3</div>
 <div id="div4">Div 4</div>
 <div id="div5">Div 5</div>
 <div id="div6">Div 6</div>
 <div id="div7">Div 7</div>
 <!-- etc -->
</div>

<button onclick="mostrar.accion(3)">Mostrar el div numero 3</button>

Saludos.

Gracias ivanfc0o, eso es lo que estaba buscando. Otra pegunta, si quiero que los dos botones sean imagenes como agrego que realize la accion cambiar.accion(2,1), como se lo asigno a la imagenes?

Desde ya gracias!

Saludos

Rakin escribió:

Código HTML :

<img src="imagen.jpg" alt="" onclick="cambiar.accion(2,1)" />

Perfecto! .

Una sola pregunta mas, en ambas capas tengo que mostrar una imagen a la cual le hace zoom al pasar el mouse, ya lo tengo armado, en la capa 2 al iniciar el html me muestra correctamente pero al pasar al div 1 solo me mustra la imagen, probe sacando en el div 1 style="display:none;" me muestra ambos div funcionando pero uno debajo del otro y no en la misma ubicacion, al hacer click en algun en el btn 1 o 2 me oculta el div 2 y me muestra bien el div 1 como deberia ser, funcionando y alineado igual que el otro. Como soluciono que al iniciar la web me quede oculto el div 1 pero que al aparecer no me muestre como imagen y si con el "efecto" que deberia? No se si logre explicarme.

Gracias!

Te debo estar volviendo loco jaja

Saludos.

Mi no entender. Algún código que uses?

Sabia que no habia explicado bien .

Es asi, en los dos div tengo dentro de ellos otros dos div con un efecto Inner Zoom (lo podras ver ACA!)

Me quedaria asi el codigo:

Código :

<div id="div1" style="display:none;" >
<div class="zoom-section">
      <div class="zoom-small-image"> <a href='imagen01.jpg' class = 'cloud-zoom' rel="position: 'inside' , showTitle: false, adjustX:-4, adjustY:-4">
        <img src="imagenGrande01.jpg" title="Imagen 01" alt=''/></a> </div>
</div>
</div>
</div> 
<div id="div2">
<div class="zoom-section">
      <div class="zoom-small-image"> <a href='imagen02.jpg' class = 'cloud-zoom' rel="position: 'inside' , showTitle: false, adjustX:-4, adjustY:-4">
        <img src="imagenGrande02.jpg" title="Imagen 02" alt=''/></a> </div>
</div>
</div>
</div> 

Entonces, el primer div que me muestra funciona, pero al mostrar el segundo div solo me muestra la imagen y no el efecto de zoom.

Si yo le saco a div1 style="display:none;" , me muestra los dos div uno debajo del otro funcionando correctamente el zoom, pero necesito que quede alineado y en la misma posicion ambos div.

a ver si alguien me sabe resolver el problema....porque me vuelvo loco buscandoo!!!!
Tengo un script para mostrar y ocultar unos divs haciendo clic en una imagen. El problema es que al hacer click en otra imagen me aparece por debajo el div anterior...necesito saber como ocultar el anterior...dejo el codigo....gracias de antemano


<script language="javascript" type="text/javascript">
function muestra(show1) {
if(document.getElementById(show1).style.display == '') {
document.getElementById(show1).style.display = 'none';

} else {
document.getElementById(show1).style.display = '';

}
}

function muestra(show2) {
if(document.getElementById(show2).style.display == '') {
document.getElementById(show2).style.display = 'none';

} else {
document.getElementById(show2).style.display = '';

}
}

function muestra(show3) {
if(document.getElementById(show3).style.display == '') {
document.getElementById(show3).style.display = 'none';

} else {
document.getElementById(show3).style.display = '';

}
}



</script>