Cambio de imágenes superpuestas z-index con jQuery

Tengo tres imágenes rectangulares superpuestas dentro de una línea diagonal, la primera completamente visible en la esquina superior izquierda, la segunda en el centro parcialmente oculta por la primera y la última en la parte inferior- esquina derecha parcialmente oculta por el segundo. Quiero que la imagen en la que se hace clic se coloque encima de las demás. Estoy tratando de lograr esto manipulando z-index con jQuery, pero parece que no funciona. En realidad parece que jQuery ni siquiera es reconocido.Cambio de imágenes superpuestas z-index con jQuery

Este es mi código de prueba:

<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"> 
    $(document).ready(function() { 
     $('#launch').click(function() { 
      alert('Ok'); 
     }); 

     $('.bottom-pic').click(function() { 
      $(this).css('z-index' : '1'); 
      $('.bottom-pic').not(this).css('z-index' : '0'); 
     }); 
    }); 
    </script> 
    <style type="text/css"> 
    #pictures { 
     width: 650px; 
     height: 300px; 

     margin-left: auto; 
     margin-right: auto; 
     margin-top: 20px; 
     margin-bottom: 50px; 

     position: relative; 
    } 

    #top { 
     top: 0; 
     left: 0; 

     position: absolute; 
     z-index: 1; 
    } 

    #center { 
     top: 60px; 
     left: 200px; 

     position: absolute; 
     z-index: 1; 
    } 

    #bottom { 
     top: 150px; 
     left: 400px; 

     position: absolute; 
     z-index: 0; 
    } 
    </style> 
    </head> 
    <body> 
    <div id="pictures"> 
     <img src="bottom-pic.jpg" id="top" class="bottom-pic"> 
     <img src="bottom-pic.jpg" id="center" class="bottom-pic"> 
     <img src="bottom-pic.jpg" id="bottom" class="bottom-pic"> 
    </div> 
    <input type="button" value="Try" id="launch"> 
</body> 
</html>

Aún cuando haga clic en el "lanzamiento" botón de nada ni siquiera sucede.

Fuente

2011-12-28 Davide Valdo

De acuerdo, me acabo de dar cuenta de que cometió un pequeño error al usar la misma etiqueta para cargar la consulta y DECLARAR su javascript en línea ... no puede hacer eso. Tienes que usar dos etiquetas de script separadas.

<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"> 
    </script>

NOTA la nueva etiqueta de script:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#launch').click(function() { 
      alert('Ok'); 
     }); 

     $('.bottom-pic').click(function() { 
      $(this).css('z-index', '1'); 
      $('.bottom-pic').not(this).css('z-index', '0'); 
     }); 
    }); 
    </script>

...

El resto de la respuesta sigue siendo válida .. A saber lo que tiene que deshacerse de la z-index en #top , #middle, y #bottom ....

Fuente

2011-12-28 09:49:26

Todavía jQuery no se reconoce. –

¿Tiene problemas para cargar jquery? –

Sí. Como dije, al hacer clic en el botón #launch no se produce ningún efecto. –

Te recomiendo que elimines todos los z-indexes de tu CSS. A continuación, cree una clase llamada '.veryHighZ-Index, por ejemplo, y agregue esta clase a la imagen clicada & elimine la clase de la imagen clicada anteriormente ...

Modifiqué su código un poco, pero este código aquí Deberia trabajar.

<html> 
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script> 
$(document).ready(function() { 


     // #pictures div catches all divs inside the #pictures 
    $('#pictures div').click(function() { 
      $('.veryhighz-index').removeClass('veryhighz-index'); 
      $(this).addClass('veryhighz-index'); 
    }); 
}); 
</script> 
<style type="text/css"> 
#pictures { 
    width: 650px; 
    height: 300px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 20px; 
    margin-bottom: 50px; 
     background: lime; 
    position: relative; 
     overflow: hidden; 
} 

#top { 
    top: 0; 
    left: 0; 
    position: absolute; 
} 

#center { 
    top: 60px; 
    left: 200px; 
    position: absolute; 
} 

#bottom { 
    top: 150px; 
    left: 400px; 
    position: absolute; 
} 

    .top, .center, .bottom { 
    width: 300px; 
    height: 300px; 
    border: 2px solid red; 
    } 
    .top {background: red;} 
    .center {background: yellow;} 
    .bottom {background: blue;} 


    .veryhighz-index { 
     z-index: 999999; 
    } 



</style> 
</head> 
<body> 


    <div id="pictures"> 
     <div id="top" class="top"></div> 
     <div id="center" class="center"></div> 
     <div id="bottom" class="bottom"></div> 
    </div> 

</body> 
</html>

En resumen, agregue el código siguiente CSS

.veryhighz-index { 
    z-index: 999999; 
    }

y este código a las funciones javascript

// #pictures img catches all images inside the #pictures 
    $('#pictures img').click(function() { 
     $('.veryhighz-index').removeClass('veryhighz-index'); 
     $(this).addClass('veryhighz-index'); 
    });

Fuente

2011-12-29 18:44:14 Eric

Usted está teniendo un error de sintaxis JavaScript. En sus comandos CSS, reemplazar el: con, Además, es necesario para envolver el script personalizado en su propia etiqueta de JavaScript, no dentro de la etiqueta jqueryimport

Fuente

2011-12-29 20:53:47 box86rowh

cambio le guiones de la siguiente manera:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#launch').click(function() { 
       alert('Ok'); 
      }); 

      $('.bottom-pic').click(function() { 
       $(this).css('z-index' , '1'); 
       $('.bottom-pic').not(this).css('z-index' , '0'); 
      }); 
     }); 
    </script>

que debería trabajo.

Fuente

2012-01-02 18:30:48 Smit

sólo algunas sugerencias aquí

Como Ahmed señalaron su guión está dentro de una etiqueta de script que tiene un valor src y url separada - crear una separada para la secuencia de comandos en línea también. ¿Estás feliz de haber hecho esto bien?
Intente poner la entrada de su botón entre las etiquetas de formulario de apertura y cierre o al menos algún elemento de nivel de bloque como un div o p. Aparentemente, algunos doctypes de scrict no lo aceptan de otra manera.
He tenido algunos problemas con las secuencias de comandos que no funcionan cuando se vinculan a archivos js con varios puntos en el nombre del archivo como 1.7.1.min.js - Enlace al código google alojado que tiene esos puntos en la ruta del directorio en su lugar como .../1.7.1/jquery.js

Obviamente tengo que encontrar la forma de incluir ejemplos de código - haciendo clic el botón "{}" o agregar 4 espacios no parece funcionar!

Fuente

2012-01-11 01:53:19 wunth

Cambio de imágenes superpuestas z-index con jQuery

Respuesta

Cuestiones relacionadas