Comunidad de diseño web y desarrollo en internet online

Div oculto sobre otro

Citar            
MensajeEscrito el 10 Sep 2010 04:39 pm
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.

Por Rakin

Claber

140 de clabLevel



 

firefox
Citar            
MensajeEscrito el 11 Sep 2010 03:19 am
¿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.

Por ivanfc0o

Claber

391 de clabLevel

3 tutoriales

Genero:Masculino  

Hardcore UI

chrome
Citar            
MensajeEscrito el 12 Sep 2010 03:50 am
y como modifico esto para que me sirva apra 3 , 4 o 5 imagenes mas?

Por justV

1 de clabLevel



 

firefox
Citar            
MensajeEscrito el 12 Sep 2010 02:38 pm
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 xD.

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 :?

Por gosunkugi

Claber

251 de clabLevel

1 tutorial

Genero:Masculino  

Kuri - frontend dev - XueZhongWen!

safari
Citar            
MensajeEscrito el 13 Sep 2010 05:18 am
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.

Por ivanfc0o

Claber

391 de clabLevel

3 tutoriales

Genero:Masculino  

Hardcore UI

chrome
Citar            
MensajeEscrito el 13 Sep 2010 02:06 pm
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

Por Rakin

Claber

140 de clabLevel



 

firefox
Citar            
MensajeEscrito el 14 Sep 2010 04:26 am

Rakin escribió:

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


Código HTML :

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

(y)

Por ivanfc0o

Claber

391 de clabLevel

3 tutoriales

Genero:Masculino  

Hardcore UI

chrome
Citar            
MensajeEscrito el 14 Sep 2010 02:01 pm
Perfecto! :D .

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 xD jaja

Saludos.

Por Rakin

Claber

140 de clabLevel



 

firefox
Citar            
MensajeEscrito el 15 Sep 2010 08:20 am
Mi no entender. Algún código que uses?

Por ivanfc0o

Claber

391 de clabLevel

3 tutoriales

Genero:Masculino  

Hardcore UI

chrome
Citar            
MensajeEscrito el 15 Sep 2010 01:42 pm
Sabia que no habia explicado bien xD .

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.

Por Rakin

Claber

140 de clabLevel



 

firefox
Citar            
MensajeEscrito el 09 Mar 2011 05:51 pm
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>

Por sensationalfix

0 de clabLevel



 

safari

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.