Sovrapporre immagini con il metodo jQuery fadeToggle

Un pulsante mostra/nasconde più immagini, che si sovrappongono su livelli diversi, e contemporaneamente visualizza i relativi testi di descrizione.

DEMO

Predisponiamo due div, uno contenente le immagini con id="immagini" e uno i testi con id="testo".
Il primo racchiude il div che contiene le immagini dei diversi livelli (div id="imglayer") e il div che contiene i pulsanti che le attivano (div id="pulsanti").
Il secondo contiene i div in cui scriveremo il testo che accompagna ogni livello.
Immagine, pulsante e testo sono collegati tra loro grazie al valore di id: il livello 1 ha id la, l'immagine che attiva ha id img_la e il relativo testo txt_la. Nello stesso modo si procede per tutti gli altri livelli.

Questo è il codice HTML completo:

<div id="immagini">
  <div id="imglayer">
    <img id="img_la" src="nomecartella/nomefilelayer1.ext" height="310" width="310" alt="" />
    <img id="img_lb" src="nomecartella/nomefilelayer2.ext" height="310" width="310" alt="" />
    <img id="img_lc" src="nomecartella/nomefilelayer3.ext" height="310" width="310" alt="" />
  </div>
  <div id="pulsanti">
    <img id="la" class="pulsante borderOff" src="nomecartella/nomefilebutton1.ext" width="50" height="50" alt="" />
    <img id="lb" class="pulsante borderOff" src="nomecartella/nomefilebutton2.ext" width="50" height="50" alt="" />
    <img id="lc" class="pulsante borderOff" src="nomecartella/nomefilebutton3.ext" width="50" height="50" alt="" />
  </div>
</div>
<div id="testo">
    <div style="display:block">Testo di default</div>
    <div id="txt_la">Testo 1</div>
    <div id="txt_lb">Testo 2</div>
    <div id="txt_lc">Testo 3</div>
</div>

Questi gli stili CSS applicati:

/* div contenitore delle immagini */
div#immagini{
float:left;
}
/* livelli */
div#imglayer{
background:url('nomecartella/nomefileimgdefault.ext') left top no-repeat;
width: 340px;
height: 270px;
position: relative;
}
div#imglayer img{
display: none;
position:absolute;
top:0;
left:0;
}
/*pulsanti */
div#pulsanti{
text-align:center;
margin-top: 17px;
}
div#pulsanti img{
margin: 0 5px;
cursor:pointer;
border-width: 2px;
border-style:solid;
}
.borderOn{
border-color:red;
}
.borderOff{
border-color:gray;
}
/* testi */
#testo{
float:left;
padding: 10px;
margin-left: 10px;
border: 1px solid gray;
height: 319px;
width: 200px;
font: 14px 'Trebuchet MS';
color: #000;
line-height: 16px;
}
#testo div{
position:relative;
display:none;
}

Le immagini dei livelli e i testi vengono nascosti grazie a display:none. Al div con id imglayer è impostata un'immagine di sfondo (background:url('nomecartella/nomefileimgdefault.ext') che si visualizza all'apertura della pagina.

Il "motore" dell'effetto è il codice javascript che utilizza le funzioni della libreria jQuery. In head della pagina includiamo la libreria:

<script src='http://code.jquery.com/jquery-1.10.2.js'></script>

Quindi, all'interno del tag <script></script> il codice che verrà eseguito al caricamento del DOM:

$(document).ready(function(){
 $('img.pulsante').click(function(){
  var idl = $(this).attr('id');
  $('img#img_'+idl).fadeToggle();
  $('#txt_'+idl).fadeToggle();
  if ($('#testo div:visible').length == 1){
   $('div#testo div:eq(0)').show();
  }
  else{
   $('div#testo div:eq(0)').hide();
  }
  if($(this).hasClass('borderOff')){
   $(this).removeClass('borderOff').addClass('borderOn');
  }
  else {
   $(this).removeClass('borderOn').addClass('borderOff');
  };
 });
});

Al click sul pulsante viene memorizzato il suo valore di id, che consente di individuare l'immagine e il testo ad esso associati per visualizzarli o nasconderli con effetto dissolvenza grazie al metodo fadeToggle.

Al pulsante cliccato viene impostato un bordo colorato, attribuendogli la classe borderOn. L'istruzione condizionale if rileva quale classe è impostata sul pulsante e gli assegna quella alternativa (borderOff).
Un'altra istruzione condizionale (if ($('#testo div:visible').length == 1) rileva se ci sono testi visibili e, in caso contrario, visualizza il testo di default.