| Come si creano una serie di immagini che cambiano al passaggio del mouse ? Hai presente come in certi menù ? |
Si chiamano rollover e sono immagini che cambiano nel momento in cui viene passato sopra il puntatore del mouse. Il cambio avviene grazie a due gestori di eventi di JavaScript e precisamente: onMouseOut e onMouseOver. Ogni immagine contenuta all'interno di una pagina web ha un suo numero indice che la identifica; l'esempio sotto riportato andrà benissimo anche per più immagini, si tratterà semplicemente di incrementare ogni volta il numero indice che si trova fra le parentesi quadrate [x]. <a href="link1.html" onMouseOver="document.images[0].src='immagine.gif';" onMouseOut="document.images[0].src='immagine_alternativa.gif';"> <IMG src="immagine.gif" width=xx height=yy></a> le immagini dovranno essere almeno 2, in questo caso: immagine.gif e immagine_alternativa.gif, dovranno avere per ovvi motivi le stesse identiche dimensioni in altezza e larghezza. Immagine.gif è quella che si vede normalmente a caricamento pagina avvenuto, nel momento esatto in cui il cursore del mouse passerà sopra all'immagine, questa cambierà aspetto richiamando immagine_alternativa.gif, per poi tornare allo stato iniziale nel momento in cui il cursore del mouse abbandona l'area occupata dall nuova immagine. Se le immagini sono più di una, si dovrà semplicemente ripetere lo stesso codice cambiando nome alle immagini e incrementando il numero fra parentesi quadre in questo modo: <a href="link2.html" onMouseOver="document.images[1].src='immagine2.gif';" onMouseOut="document.images[1].src='immagine_alternativa2.gif';"> <IMG src="immagine2.gif" width=xx height=yy></a> Continuando sulla stessa falsa riga si possono creare tutti i rollover che necessitano all'interno di una stessa pagina web. Se le immagini sono molte o queste fossero piuttosto "pesanti" è consigliabile eseguire un preload delle stesse per evitare che il tempo necessario al loro scaricamento sia un ostacolo al buon funzionamento dell'effetto grafico. |
Se ne avete di nuove non vi resta che scrivermi.
Elenco completo delle F.A.Q.