|
<div id="testo_mod1" onmouseover="ingrand();" onmouseout="rimpic();" class="piccolo" style="height:40px;width:300px"> Passa il cursore sopra di me </div> <style> .grande{font-size:20px} .piccolo{font-size:10px} </style> <script language="javascript"> function ingrand() { document.all.testo_mod1.className="grande"; } function rimpic() { document.all.testo_mod1.className="piccolo"; } </script> |
È stato creato come sempre un oggetto con div e sono state specificate le funzioni richiamate quando il mouse è dentro e fuori dall'oggetto (queste funzioni non devono necessariamente essere in uno script separato, ma possono anche stare direttamente dentro il tag div. Ho scelto il primo metodo perché è un codice più leggibile.) A questo oggetto è stata assegnata la classe piccolo. Subito sotto viene descritto cosa succede ad un oggetto con tale classe, ovvero il font ha grandezza 10 pixel. Subito dopo viene precisato che la classe grande fa diventare questa grandezza, 20 pixel. In seguito lo script non fa altro che assegnare una delle due classi all'evento che accade. Nota bene: per evitare che all'ingrandirsi del testo tutto il testo sottostante sia spostato verso il basso, basta specificare una altezza per l'oggetto definito da div. In questo caso dopo un paio di prove ho visto che 40 andava bene. Inoltre ho impostato a 300 pixel la larghezza per fare in modo che il testo non si espanda se si passa il mouse nella parte opposta dello schermo, in corrispondenza della riga su cui si trova l'oggetto stesso. |