Modificació dinàmica d'estils de text |
|||||
| Qui som? | Història | Productes | Contacte | ||
|---|---|---|---|---|---|
| Empresa Equip directiu |
Inicis Creixement Actualitat |
Producte A Producte B Producte C Producte D |
Comandes Més informació Incidències |
||
Aquest document presenta una maqueta d'un menú de dos nivells. En situar el cursor damunt alguna de les caselles del primer nivell, canviarà el color de fons d'aquesta i alhora es presentarà el menú de segon nivell corresponent. Com que el que ara ens interessa és el canvi d'estil i no pas el tema dels hipervincles, els menús de segon nivell són ficticis: si hi fem clic no passa res.
A fi de il·lustrar una mica més el ventall de possibilitats de canvi, hi hem afegit un títol de document variable: es presentarà de color vermell si no són encara les 12 del migdia; en cas contrari, el veurem de color verd. Amb la mateixa finalitat hi hem posat un botó que activa un canvi de característiques del primer paràgraf de text.
Notem que tots els elements que han de sofrir algun canvi estan identificats amb id: així hem identificat els elements H1, TH, TD i P.
Pel que fa als estils, observeu les denominacions .style.color (color del text), style.backgroundColor (color de fons) i style.fontSize (gruix de lletra).
Els canvis són inclosos en sengles funcions: canvi1(), canvi2(), etc., fora1(), fora2(), titol() i canvitext()
Aquestes funcions s'engeguen mitjançant onMouseOver, onMouseOut, onLoad i onClick.