Oggi vedremo, con questo breve e semplice HowTo, come creare un bottone relativo alla manipolazione di un div; più specificatamente di come farlo apparire e scomparire.
Cominciamo subito con il creare il pulsante
Ora procediamo con il JAVASCRIPT.Codice:<!-- Se lo volete a mò di link --> <a href="#" onClick="azione('nomediv');">Pulsante</a> <!-- Se lo volete come immagine --> <img src="miaimg.jpg" onClick="azione('nomediv');" /> <!-- Se lo volete come pulsante di form --> <input type="button" value="Pulsante" onClick="azione('nomediv');">
Nota:
onClick="azione('nomediv');" è l'evento(onclick) che farà partire la funzione(azione) con i relativi valori ('nomediv')
Ora creiamo il livello (ma può essere qualsiasi cosa, basta che abbia come id "nomediv").Codice:<script> //Dichiaro la funzione function azione(variabile) { if(document.getElementById(variabile).style.display=='') { document.getElementById(variabile).style.display='none'; }else{ document.getElementById(variabile).style.display=''; } </script>
Alla pressione del pulsante il testo scomparirà/apparirà.Codice:<div id="nomediv">Ciao, questo testo scomparirà!</div>
Ecco il codice completo!
Potete anche usare le potenti funzioni setInterval e setTimeout per gestire gli intervalli di tempo.Codice:<script> //Dichiaro la funzione function azione(variabile) { if(document.getElementById(variabile).style.display=='') { document.getElementById(variabile).style.display='none'; }else{ document.getElementById(variabile).style.display=''; } </script> <!-- Se lo volete a mò di link --> <a href="#" onClick="azione('nomediv');">Pulsante</a> <!-- Se lo volete come immagine --> <img src="miaimg.jpg" onClick="azione('nomediv');" /> <!-- Se lo volete come pulsante di form --> <input type="button" value="Pulsante" onClick="azione('nomediv');"> <div id="nomediv">Ciao, questo testo scomparirà!</div>
Ecco come un oggetto compare/scompare ogni secondo:
Naturalmente la funzione azione è quella di prima, e non deve mancare nella nostra pagina, se non si vuole incorrere in errori!Codice:<script> setInterval("azione('nomediv')",1000); </script> <div id='nomediv'>Livello che c'è e non c'è!</div>
setInterval(funzione,minisec) esegue ogni minisec la determinata funzione, mentre setTimeout(funzione,minisec) esegue la funzione DOPO minisec stabiliti.
Penso di essere stato abbastanza esaustivo su ciò che diceva il titolo, quindi vi dico: alla prossima!!

LinkBack URL
About LinkBacks


