Questo javascript molto semplice può essere utile per visualizzare con un click
elementi e altre risorse che si desidera mantenere inizialmente
nascosti. All'interno dell'elemento invisibile può essere incluso qualsiasi
tipo di contenuto: testo, immagini, filmati multimediali o animazioni flash.
Il codice jacascript va inserito nella sezione head della pagina:
<!-- INIZIO CODICE -->
<script type="text/javascript">
<!--
function scambio(id){
if (document.getElementById){
if(document.getElementById(id).style.display == 'none'){
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
}
}
-->
</script>
<!-- FINE CODICE -->
Lo script, come detto all'inizio, è molto semplice ma efficace. L'unica
funzione presente, attivata dal link inserito 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, va precisato che l'utente dovrà attendere, prima di rendere operativa
la pagina e i links, il caricamento di tutte le immagini, visibili e non visibili,
incluse nella galleria.
| Richiamo interno alla
pagina web |
Il seguente codice html fa riferimento per semplicitià a due soli elementi.
Naturalmente se ne possono 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 pagina web.
<!-- INIZIO CODICE -->
<!-- blocco 1 -->
<div style="width:400px; border-style: solid; border-color: #999999; border-width: 1px; text-align:left;">
<p><strong><a href="#" onclick="scambio('nome'); return false"><b>Link</b></a><br />
Il link va inserito in questo spazio. Può essere del testo o
un'immagine.</strong></p>
</div>
<!-- blocco 1 -->
<!-- blocco 2 -->
<div id='nome' style="display:none; width:400px; border-style: solid; border-color: #999999; border-width: 1px; text-align:left;">
L'elemento da includere va inserito in questo spazio. Può essere del testo,
un'immagine, un'animazione flasch, del codice javascript o html.
</div>
<!-- blocco 2 -->
<!-- FINE CODICE -->
Come si può notare 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
ricordando di cambiare il nome del secondo blocco indicato nell'id e mutare di
conseguenza anche la variabile passata allo script nel link presente nel
primo blocco (scambio('id')).
L'elemento del secondo blocco viene nascosto al primo caricamento della pagina
(proprietà 'display:none). Se si volesse renderlo visibile, e dunque lasciare
all'utente la possibilità di nasconderlo, basterà eliminare il riferimento
display:none dallo stile in linea.
Elemento a comparsa con un click
