immagini una sopra l'altra

[wastzzz]

Ciao a tutti,

devo fare una pagina contenente due immagini una sopra l'altra (pensavo utilizzando dei <div> e posizionandoli uno sopra l'altro).
Quando l'utente clicca su un'immagine, tale immagine deve passare in primo piano e l'altra deve andare in secondo piano (sotto).

Per chiarirci meglio ho fatto un disegno:


non ho molta esperienza in javascript, ma qualcuno potrebbe darmi qualche suggerimento su cosa mettere nell'evento onclick()..

grazie in anticipo

[willybit]

Ciao wastzzz,

potresti cambiare il z-index all'onclick

<div style="position:absolute;top:20px;left:20px;background-color:red;width:100px;height:40px;z-index:100" onclick="this.style.zIndex+=2"></div>
<div style="position:absolute;top:30px;left:30px;background-color:green;width:100px;height:40px;z-index:101" onclick="this.style.zIndex+=2"></div>

[Mega69]

nell'evento onclick fai attivare una funzione che modifica lo z-index dell'uno e quello dell'altro div...
Per facilitarti le cose...

function sovrapponi_il_primo_livello()
{
document.getElementById('primo_livello').style.zindex="2";
document.getElementById('secondo_livello').style.zindex="1";
}

function sovrapponi_il_secondo_livello()
{
document.getElementById('primo_livello').style.zindex="1";
document.getElementById('secondo_livello').style.zindex="2";
}

In ogni caso non sono sicuro di come si scriva z-index in javascript, se così come ho scritto io oppure z-index come in css;

Ovviamente inserisci il codice tra i tag script e poi crea mediante il css due div sovrapposti...
Se devi sovrapporre due immagini puoi applicare le proprietà css direttamente a loro.

Apparte il dubbio su zindex lo script dovrebbe funzionare!

[willybit]

Originariamente inviato da Mega69
Apparte il dubbio su zindex lo script dovrebbe funzionare!

style.zIndex