Un JavaScript molto semplice che può essere utile per visualizzare ad un click dell'utente elementi e altre risorse che si desidera mantenere inizialmente nascosti. Nel nostro esempio sono stati utilizzate due foto e due testi, tuttavia all'interno dell'elemento invisibile può essere incluso qualsiasi tipo di contenuto, anche, per esempio, filmati multimediali o animazioni flash.
- esempio.htm
- foto1.jpg
- foto2.jpg
## 1: LA SEZIONE JAVASCRIPT
La sezione JavaScript contiene il codice per eseguire lo script che andrà inserito nella sezione head della pagina Web. Vediamolo:
<script type="text/javascript">
<!--
function scambio(id){
if (document.getElementById){
if(document.getElementById(id).style.display == 'nonè){
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'nonè;
}
}
}
-->
</script>
Lo script, come detto all'inizio, è molto semplice ma efficace. L'unica funzione presente, attivata dal link presente nella pagina web, controllerà lo stato di visualizzazione dell'elemento associato (style.display) e lo cambierà: se lo stato è visibile lo renderà invisibile, se lo stato è invisibile lo renderà visibile.
Il nome dell'elemento da rendere visibile o invisibile è passato allo script dall'unica variabile che accetta (id) e lo si dovrà specificare al'interno della pagina web, come vedremo più avanti.
È possibile aggiungere tutte le risorse che si desidera anche se va precisato che il browser caricherà in memoria tutti gli elementi anche prima di visualizzarli. Lo script si limita solo a renderli visibili o invisibili. Ciò significa che se volessimo utilizzare lo script per una presentazione di fotografie in un'uica pagina web, va precisato che l'utente dovrà attendere, prima di rendere operativa la pagina e i link, il caricamento di tutte le immagini, visibili e non visibili, incluse nella galleria.
## 2: RICHIAMO INTERNO ALLA PAGINA WEB
Il codice HTML che presentiamo fa riferimento per semplicitià a due soli elementi, mentre nell'esempio allegato a questo articolo gli esempio sono quattro. Voi naturalmente ne potrete aggiungere a piacimento agendo sulla variabile del link e sul nome dell'ID. Vediamo il codice, personalizzato utilizzando alcune proprietà comuni dei CSS. Esso andrà inserito naturalmente all'interno della sezione body della vostra pagina web.
<!-- foto 1 - blocco 1 -->
div style="width:400px; border-style: solid; border-color: #999999; border-width: 1px; text-align:left;">
<p><strong><a href="#" onclick="scambio('foto1'); return false">FOTO 1</a><br />I corridori si preparano all'Encierro, Pamplona</strong></p>
</div>
<!-- foto 1 - blocco 1 -->
<!-- foto 1 - blocco 2 -->
<div id='foto1' style="width:400px; border-style: dotted; border-color: #999999; border-width: 1px; border-top: none; display:none;">
<p style="margin:10px"><img src="foto1.jpg" alt="I corridori si preparano all'Encierro, Pamplona. Foto di Francesco Caccavella." width="240" height="180"/></p>
</div>
<!-- foto 1 - blocco 2 -->
<!-- testo 1 - blocco 1 -->
<div style="width:400px; border-style: solid; border-color: orange; border-width: 1px; text-align:left;">
<p><strong><a href="#" onclick="scambio('testo1'); return false">TESTO 1</a><br />ANSA, 14 luglio 2007</strong></p>
</div>
<!-- testo 1 - blocco 1 -->
<!-- testo 2 - blocco 2 -->
<div id='testo1' style="width:400px; border-style: dotted; border-color: orange; border-width: 1px; border-top: none; display:none;">
<p style="margin:10px;text-align:justify;">Tre persone sono rimaste ferite, una con una cornata, nell'ultima corsa di tori delle feste di San Fermin di Pamplona. Gli 'encierros' di quest'anno hanno causato in tutto 16 feriti da cornate, di cui 11 sono ancora in ospedale, ma nessuno rischia la vita.</p>
</div>
<!-- testo 2 - blocco 2 -->
Come notate ogni contenuto è formato da due blocchi di elementi raggruppati dall'elemento <DIV>. Nel primo blocco è presente il link che attiverà la comparsa/scomparsa del successivo elemento, incluso nel secondo blocco. Per aggiungere nuovi elementi basterà seguire la sintassi mostrata nell'esempio ricordandosi di cambiare il nome del secondo blocco (indicato come 'foto1' in id='foto1') e mutare di conseguenza anche la variabile passata allo script nel link presente nel primo blocco (scambio('foto1')).
Come potete notare l'elemento del secondo blocco viene nascosto al primo caricamento della pagina (proprietà 'display:nonè). Se si volesse renderlo visibile, e dunque lasciare all'utente la possibilità di nasconderlo, basterà eliminare il riferimento display:none dallo stile in linea.
