Attraverso la combinazione di javascript e css si può ottenere un utile risultato di mostrare elementi all'interno di un div.
La funzione js è molto semplice, non farà altro che cambiare la dichiarazione display da none a block, del css degli elementi che inseriremo all'interno di una variabile dello script.

vediamo come fare nel dettaglio.

inseriamo questo script all'inteno dei tag della pagina in questione.

Codice: Seleziona tutto

<script type="text/javascript">
function toggle(div)
{
var option=['ombra_esterna','ombra_interna','bagliore_interno','bagliore_esterno','smusso','contorno','texture','finitura','colore','sfumatura','pattern','traccia'];

for(var i=0; i<option.length; i++)
{ obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div) && !(obj.style.display=="block")? "block" : "none"; }
}
</script>

ho chiamato questa funzione toggle (alternare), quindi il div che dovrà contenere gli elementi da mostrare dovrà avere tale identificativo.

Codice: Seleziona tutto

<div id="toggle"></div>

come vedete, all'interno di var option io ho inserito 12 oggetti, ma se ve ne servono di meno non c'è nessun problema, basta editare lo script secondo le proprie esigenze.

adesso andiamo a inserire i bottoni per nacondere/mostrare gli oggetti all'interno del div contenitore
avremo questo

Codice: Seleziona tutto

<div id="toggle">      
<input type="button" class="button" onclick="toggle('ombra_esterna')" value="Ombra esterna" /><br />
<input type="button" class="button" onclick="toggle('ombra_interna')" value="Ombra interna" /><br />
<input type="button" class="button" onclick="toggle('bagliore_esterno')" value="bagliore esterno" /><br />
<input type="button" class="button" onclick="toggle('bagliore_interno')" value="Bagliore interno" /><br />
<input type="button" class="button" onclick="toggle('smusso')" value="Smusso a effetto rilievo" /><br />
<input type="button" class="button3" onclick="toggle('contorno')" value="Contorno" /><br />
<input type="button" class="button3" onclick="toggle('texture')" value="Texture" /><br />
<input type="button" class="button" onclick="toggle('finitura')" value="Finitura lucida" /><br />
<input type="button" class="button" onclick="toggle('colore')" value="Sovrapposizione colore" /><br />
<input type="button" class="button" onclick="toggle('sfumatura')" value="Sovrapposizione sfumatura" /><br />
<input type="button" class="button" onclick="toggle('pattern')" value="Sovrapposizione pattern" /><br />
<input type="button" class="button" onclick="toggle('traccia')" value="Traccia" /><br /></div>

come vedete ogni input richiama la funzione toggle per ogni oggetto contenuto nelle opzioni della variabile, 12 input per 12 oggetti.

continuiamo, inseriamo i div degli oggetti da mostrare/nascondere, anche in questo caso saranno 12
per cui avremo

Codice: Seleziona tutto

<div id="toggle">      
<input type="button" class="button" onclick="toggle('ombra_esterna')" value="Ombra esterna" /><br />
<input type="button" class="button" onclick="toggle('ombra_interna')" value="Ombra interna" /><br />
<input type="button" class="button" onclick="toggle('bagliore_esterno')" value="bagliore esterno" /><br />
<input type="button" class="button" onclick="toggle('bagliore_interno')" value="Bagliore interno" /><br />
<input type="button" class="button" onclick="toggle('smusso')" value="Smusso a effetto rilievo" /><br />
<input type="button" class="button3" onclick="toggle('contorno')" value="Contorno" /><br />
<input type="button" class="button3" onclick="toggle('texture')" value="Texture" /><br />
<input type="button" class="button" onclick="toggle('finitura')" value="Finitura lucida" /><br />
<input type="button" class="button" onclick="toggle('colore')" value="Sovrapposizione colore" /><br />
<input type="button" class="button" onclick="toggle('sfumatura')" value="Sovrapposizione sfumatura" /><br />
<input type="button" class="button" onclick="toggle('pattern')" value="Sovrapposizione pattern" /><br />
<input type="button" class="button" onclick="toggle('traccia')" value="Traccia" /><br />
<div id="ombra_esterna"><img src="immagini/ombra_esterna.gif" alt="wine" width="452" height="394" /></div>
<div id="ombra_interna"><img src="immagini/ombra_interna.gif" alt="wine" width="452" height="394" /></div>
<div id="bagliore_interno"><img src="immagini/bagliore_interno.gif" alt="bagliore interno" width="452" height="394" /></div>
<div id="bagliore_esterno"><img src="immagini/bagliore_esterno.gif" alt="texture" width="452" height="394" /></div>
<div id="smusso"><img src="immagini/smusso.gif" alt="wine" width="452" height="394" /></div>
<div id="contorno"><img src="immagini/contorno.gif" alt="contorno" width="452" height="394" /></div>
<div id="texture"><img src="immagini/texture.gif" alt="texture" width="452" height="394" /></div>
<div id="finitura"><img src="immagini/finitura.gif" alt="finitura" width="452" height="394" /></div>
<div id="colore"><img src="immagini/colore.gif" alt="sovrapposizione colore" width="452" height="394" /></div>
<div id="sfumatura"><img src="immagini/sfumatura.gif" alt="wine" width="452" height="394" /></div>
<div id="pattern"><img src="immagini/pattern.gif" alt="pattern" width="452" height="394" /></div>
<div id="traccia"><img src="immagini/traccia.gif" alt="wine" width="452" height="394" /></div>
</div>

adesso che abbiamo tutti gli elementi dobbiamo creare la situazione di partenza, ossia nascondere i div attraverso il css.

Codice: Seleziona tutto

#ombra_esterna, #ombra_interna, #bagliore_interno, #bagliore_esterno, #smusso, #contorno, #texture, #finitura, #colore, #sfumatura, #pattern, #traccia {
   display:none;
   }

finito, potete vedere il risultato su questa pagina, chiaramente per ottenere il mio stesso risultato bisogna incrementare un pò il codice css e la grafica.