In questo tutorial vedremo come rendere visibili degli elementi della nostra pagina web attraverso un link dinamico… Potremmo farlo con Onclick="document.elemento.style.display=’block’" ma siamo eleganti e quindi ci serviremo di una funzione Javascript.
Nell’esempio in questione avremo un DIV #testo visibile e un DIV #immagine non visibile.
Ecco il codice Javacript da inserire tra i TAGs 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 tramite un ciclo IF-ELSE setta l’attributo DISPLAY in maniera diversa.
Ecco quindi il codice da inserire tra i TAGs 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" /></div>
<!-- Fine codice DIV #immagine -->
Da notare di questo codice la riga
onclick="visualizza('immagine'); return false"
che richiama al click del mouse sul link la funzione "visualizza()" per l’ID #immagine, e la riga
style="display:none"
che setta il DIV #immagine a non visualizzato.
Possiamo personalizzare questo codice a nostro piacere… creando una specie di tabella, inserendo i bordi ai DIV, o simili… Sicuramente si tratta di una struttura utile per risparmiare spazio e/o ottenere un effetto dinamico ed elegante.