In questo tutorial vedremo come rendere visibili degli elementi della nostra pagina web attraverso un link dinamico. Questa tecnica permette di fornire un’esperienza interattiva agli utenti senza la necessità di ricaricare la pagina. Potremmo utilizzare onclick=”document.elemento.style.display=’block'”, ma per un approccio più elegante e gestibile, utilizzeremo una funzione JavaScript dedicata.
Struttura dell’esempio
Nell’esempio in questione avremo un DIV con id #testo visibile e un DIV con id #immagine inizialmente non visibile. Questo approccio è utile quando si desidera nascondere contenuti che non sono immediatamente rilevanti per l’utente, riducendo il disordine visivo della pagina.
Codice JavaScript
Ecco il codice JavaScript da inserire tra i tag <head> del nostro sito:
<script type="text/javascript" language="javascript">
function visualizza(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>Come si può notare, lo script recupera l’ID tramite getElementById e, utilizzando un ciclo if-else, setta l’attributo display in maniera appropriata in base allo stato corrente dell’elemento.
Codice HTML dei DIV
Ecco quindi il codice da inserire tra i tag <body>:
<!-- Inizio codice DIV #testo -->
<div id="testo"><a href="#" onclick="visualizza('immagine'); return false">
Clicca qui per visualizzare l'immagine scoop</a></div>
<!-- Fine codice DIV #testo -->
<!-- Inizio codice DIV #immagine -->
<div id="immagine" style="display:none"><img src="immagine.jpg" alt="Immagine scoop" /></div>
<!-- Fine codice DIV #immagine -->Da notare il seguente codice:
onclick="visualizza('immagine'); return false"Questo codice richiama al click del mouse sul link la funzione visualizza() per l’ID #immagine.
Possiamo personalizzare questo codice a nostro piacere, ad esempio creando una stretta integrazione con gli stili CSS per rendere l’aspetto dei DIV più accattivante. Ecco alcuni suggerimenti:
- Aggiungere bordi e margini ai DIV per una migliore separazione.
- Utilizzare transizioni CSS per un effetto di apparizione più fluido.
- Includere più contenuti all’interno dei DIV, come testo descrittivo o ulteriori immagini.
- Creare una vera e propria tabella di contenuti interattivi.
Questa struttura è utile non solo per risparmiare spazio, ma permette anche di ottenere un effetto dinamico ed elegante che migliora l’esperienza utente.
