HTML dinamico

Cos'e' HTML dinamico?

- HTML dinamico (dynamic HTML-dHTML) non è un nuovo linguaggio, ma la possibilità offerta dai tag di HTML 4, che permettono di modificare il contenuto o la struttura di una pagina web, senza interagire con il server.

Dhtml, Javascript e CSS

Javascript e CSS sono compatibili con HTML dinamico e insieme permettono di creare pagine di grande effetto.

 

Il DOM

Il Document Object Model permette di identificare ogni elemento della pagina come un oggetto programmabile, individualmente o come parte di una collezione. Attualmente il DOM di I.E.4 è più ampio di quello di Navigator 4: quest'ultimo indirizza solo layer, frame, applet, immagini, anchor. Sia Microsoft che Netscape si sono comunque impegnate a supportare integralmente il nuovo standard 'universale' che verrà proposto da W3C

Eventi

Ad ogni elemento possono essere associati degli eventi, almeno quelli relativi alla tastiera (onkeypress, onkeydown, onkeyup) e al mouse (onmouseover, onmouseout, onmousedown, onmouseup, onmousemove, onclick, ondbclick)

Se siete stufi di vedere quel pupazzo che entra e esce dalla scatola, premete qui!

In pratica

esempio 1(funziona solo con I.E.): quando il mouse passa sopra il testo compreso fra i tag <H1> e </H1>, il testo stesso diventa rosso, quando esce torna com'era:
(<H1 onmouseover="this.style.color='red';" onmouseout="this.style.color='blue';">Testo cangiante</H1>)

Testo cangiante

esempio 1b (css)(funziona solo con I.E.): quando il mouse passa sopra il testo compreso fra i tag <H1> e </H1>, il testo stesso diventa rosso, quando esce torna com'era:
(<H1 onmouseover="this.className='rosso';" onmouseout="this.className='blu';">Testo cangiante</H1>)
richiede fra i tag di stile:
.blu {color:blue}
.rosso {color:red}

Testo cangiante

esempio 2(funziona solo con I.E.):quando il mouse passa sopra l'immagine 'mac.gif', la stessa diventa negativa (viene sostituita da 'macneg.gif'), quando esce torna com'era:
(<img src="../MAC.GIF" onmouseover="this.src='../MACNEG.GIF';" onmouseout="this.src='../MAC.GIF';">)

esempio 2b(funziona sia con I.E. che con N.N.)
<a name=qaaa>
<a href="#qaaa"
OnMouseOver="document.mac.src='../MACNEG.GIF';"
OnMouseOut="document.mac.src='../MAC.GIF';">
<img name="mac" src="../MAC.GIF" border=0>
</a>

Per approfondire

Link verificati il 30/01/2002

www.emmeffe.net/htmlplanet/dhtml/
www.okkei.net/dhtml.htm
www.risorse.net/dhtml/
digilander.iol.it/grmartin/dhtml.htm
www.manuali.net
ecc. ecc.
www.w3.org/TR/html401/
www.w3.org/TR/REC-DOM-Level-1
www.w3.org/TR/REC-CSS1
www.w3.org/TR/REC-CSS2
developer.netscape.com/tech/dynhtml
msdn.microsoft.com/voices/dude.asp
www.webmonkey.com.....
www.ruleweb.com/dhtml/
www.dansteinman.com/dynduo
etc. etc. etc.

Torna a indice Guide