Modifica immagini sovrapposte z-index con jQuery

Ho tre immagini rettangolari sovrapposte all'interno di una linea diagonale, la prima completamente visibile nell'angolo in alto a sinistra, la seconda al centro parzialmente nascosta dal primo e l'ultima nella parte inferiore- angolo destro parzialmente nascosto dal secondo. Voglio che l'immagine su cui si fa clic si sovrapponga alle altre. Sto cercando di farlo manipolando z-index con jQuery ma non sembra funzionare. In realtà sembra che jQuery non sia nemmeno riconosciuto.Modifica immagini sovrapposte z-index con jQuery

Questo è il mio codice di prova:

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

Eppure quando clicco il "lancio" pulsante nulla ancora accade.

fonte

2011-12-28 Davide Valdo

Ok, ho appena realizzato che hai commesso un piccolo errore mentre stai usando il tag SAME sia per il caricamento della query che per DICHIARARE il tuo javascript in linea ... non puoi farlo. Devi usare due tag script separati.

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

NOTA il nuovo tag 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>

...

Il resto della risposta si applica ancora .. Vale a dire si deve eliminare il z-index in #top , #middle e #bottom ....

fonte

2011-12-28 09:49:26

Ancora jQuery non viene riconosciuto. –

Oh, non riesci a caricare jquery da solo? –

Sì. Come ho detto, facendo clic sul pulsante #launch non si produce alcun effetto. –

Ti consiglio di rimuovere tutti gli z-index dal tuo css. Quindi crea una classe chiamata '.veryHighZ-Index, ad esempio, e aggiungi questa classe all'immagine cliccata & rimuovi la classe dall'immagine precedentemente cliccata ...

Ho modificato il tuo codice un po', ma questo codice qui dovrebbe funzionare.

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

In breve, aggiungere il seguente codice al css

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

e questo codice per le funzioni JavaScript

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

fonte

2011-12-29 18:44:14 Eric

Si stanno avendo un errore di sintassi JavaScript. Nei tuoi comandi CSS, sostituire il: con, Inoltre, è necessario per avvolgere il vostro script personalizzato nel proprio tag javascript, non all'interno del tag jqueryimport

fonte

2011-12-29 20:53:47 box86rowh

cambiamento che gli script come segue:

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

Questo dovrebbe lavoro.

fonte

2012-01-02 18:30:48 Smit

solo alcuni suggerimenti qui

Come Ahmed ha sottolineato lo script è all'interno di un tag script che ha un valore di src e URL separato - creare uno separato per lo script inline pure. Sei felice di averlo fatto bene?
Prova a inserire il pulsante tra l'apertura e la chiusura dei tag modulo o almeno un elemento a livello di blocco come un div o p. Apparentemente alcuni doctypes scrict non lo accettano diversamente.
Ho avuto alcuni problemi con gli script che non funzionano quando collegati a file js con più punti nel nome file come 1.7.1.min.js - collego al codice ospitato da google che ha quei punti nel percorso della directory come .../1.7.1/jquery.js

Ovviamente ho bisogno di capire come includere gli esempi di codice - facendo clic il pulsante "{}" o l'aggiunta di 4 spazi non sembra funzionare!

fonte

2012-01-11 01:53:19 wunth

Modifica immagini sovrapposte z-index con jQuery

risposta

Problemi correlati