Unofficial WebSite X5

WebSite X5 versioni obsolete => WebSite X5 [v10] Evolution - Discussioni generali => Topic aperto da: lemonsong - 01 Febbraio, 2014, 13:44:48

Titolo: jQuery .toggle (immagini su più livelli)
Inserito da: lemonsong - 01 Febbraio, 2014, 13:44:48

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

Citazione

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/ (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):

Citazione

<!-- 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):

Citazione

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

Citazione

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

Citazione

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/images/lavagna.jpg)

http://lemonsong.altervista.org/test_jq_toggle/files/a.png (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/b.png)
http://lemonsong.altervista.org/test_jq_toggle/files/c.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/a_ico.png)
http://lemonsong.altervista.org/test_jq_toggle/files/b_ico.png (http://lemonsong.altervista.org/test_jq_toggle/files/b_ico.png)
http://lemonsong.altervista.org/test_jq_toggle/files/c_ico.png (http://lemonsong.altervista.org/test_jq_toggle/files/c_ico.png)

Titolo: Re:jQuery .toggle (immagini su più livelli)
Inserito da: milux - 01 Febbraio, 2014, 14:19:15

(http://217.64.199.164/Public/data/eulus77/201011920349_Applauso3.gif)