jQuery .toggle (immagini su più livelli)

[lemonsong]

Posto qui un esempio preparato qualche giorno fa leggendo un post su Answers, dove l'autore chiedeva questo:

Far apparire e scomparire più immagini in sovrapposizione su uno sfondo statico mediante un click che le aggiunga o le tolga a scelta.

Visto che il post è stato chiuso e l'esempio era pronto, lo linko qui, sperando che possa essere utile:

http://lemonsong.altervista.org/test_jq_toggle/


Nel sorgente della pagina si trovano dei commenti che spiegano dove inserire i vari codici (li incollo anche qui).


Script jQuery (grazie stesil per l'aiuto):

<!-- Proprietà Pagina - Esperto - Prima della chiusura del tag HEAD -->
<script>
$(document).ready(function(){
$('img.pulsante').click(function(){
var idimg = $(this).attr('id');
$('img#img_' idimg).fadeToggle('fast');
}).toggle(function(){
$(this).css('border-color', 'red');
},
function(){
$(this).css('border-color', 'gray');
});
});
</script>

Oggetto HTML e Widgets con un'immagine di sfondo (nell'esempio una specie di lavagna):

<!-- Primo Oggetto HTML e Widgets - START -->
<div id="imglayer">
<img id="img_la" src="files/a.png" height="310" width="310" alt="" />
<img id="img_lb" src="files/b.png" height="310" width="310" alt="" />
<img id="img_lc" src="files/c.png" height="310" width="310" alt="" />
</div>
<!-- Primo Oggetto HTML e Widgets - END -->

Oggetto HTML e Widgets dove inserire i "pulsanti" (nell'esempio le lettere A, B, e C)

<!-- Secondo Oggetto HTML e Widgets - START -->
<div class="pulsanti">
<img id="la" class="pulsante" src="files/a_ico.png" width="50" height="50" alt="" />
<img id="lb" class="pulsante" src="files/b_ico.png" width="50" height="50" alt="" />
<img id="lc" class="pulsante" src="files/c_ico.png" width="50" height="50" alt="" />
</div>
<!-- Secondo Oggetto HTML e Widgets - END -->

CSS inseriti nella sezione Esperto di un Oggetto HTML e Widgets:

div#imglayer img{
display:none;
position:absolute;
top:0;
left:0;
}
div.pulsanti{
text-align:center;
}
div.pulsanti img{
margin: 0 5px;
cursor:pointer;
border: 2px solid gray;
}

In rosso da personalizzare.


Di seguito i link alle immagini usate:

http://lemonsong.altervista.org/test_jq_toggle/images/lavagna.jpg

http://lemonsong.altervista.org/test_jq_toggle/files/a.png
http://lemonsong.altervista.org/test_jq_toggle/files/b.png
http://lemonsong.altervista.org/test_jq_toggle/files/c.png

http://lemonsong.altervista.org/test_jq_toggle/files/a_ico.png
http://lemonsong.altervista.org/test_jq_toggle/files/b_ico.png
http://lemonsong.altervista.org/test_jq_toggle/files/c_ico.png

[milux]