Programmazione Web » Javascript » Realizzare elementi a comparsa con un click
Realizzare elementi a comparsa con un click
Difficoltà:
Scritto da Alberto Giuliani
Sito Web: http://www.agwebsolutions.it 
Questo tutorial è stato letto 1185 volte
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 preferiamo essere 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:
<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 -->
</body>
Da notare in 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. Sicuramente si tratta di una struttura utile per risparmiare spazio e/o ottenere un effetto dinamico ed elegante.
Aggiungi questo tutorial ai preferiti
