A questo gruppo si possono ricondurre i seguenti eventi:
- onMouseOver: attivato quando il mouse si muove su un oggetto;
- onMouseOut: attivato quando il mouse si sposta da un oggetto;
- onMouseMove: si muove il puntatore del mouse, ma poiché questo evento ricorre spesso (l'utilizzo del mouse è frequente), non è disponibile per default, ma solo abbinato con la cattura degli eventi, che si spiegherà in seguito.
Gli eventi onMouseOver e onMouseOut sono complenmentari in quanto il primo è attivato nel momento in cui il puntatore è posto nell'area dell'oggetto il cui tag contiene l'evento e il secondo quando ne esce.
Per le versioni di Javascript ecco il quadro riepilogativo (il colore diverso dell'asterisco indica le modifiche rispetto alla versione precedente, NN sta per Netscape e IE per Internet Explorer):
| Evento |
Versione Javascript |
NN2.0 | NN3.0 | NN4.0 | NN4.06 | IE3.0 | IE4.0 | IE5.0 |
| onMouseOver | 1.0 | * | * | * | * | * | * | * |
| onMouseOut | 1.0 | * | * | * | * | * | * | * |
| onMove | 1.2 | * | * | * | * |
Gli eventi onMouseOver ed onMouseOut assumono dalla versione 1.0 alla 1.1 di Javascript la capacità di essere associati al tag AREA, per cui può operare anche con le mappe cliccabili, ma per Netscape deve essere associato anche al tag HREF, cioè ad un link, anche se fittizio.
Tag sensibili
Altro limite è dato, per Netscape e per le vecchie versioni di Explorer, dai tag a cui l'evento può essere associato:
| Evento | Tag associati in Netscape e JScript | |||||||
| onMouseOver | Questo gestore è usato con i pulsanti di invio (submit), pulsanti di reset (reset), caselle di controllo (checkbox e radio), bottoni, tag <INPUT> di tipo OPTION e tag <A>. | |||||||
| onMouseOut | Usato con i tag <BODY> e <A> | |||||||
| onMouseMove | Usato con i bottoni e i tag <BODY> e <A> | |||||||
Molto più numerosi i tag associati in Explorer 4.0 e successivo a tutti i tipi di eventi:
A, ADDRESS, APPLET, AREA, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, NEXTID, NOBR, OBJECT, OL, P, PLAINTEXT, PRE, RT, RUBY, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP
Rollover
Importantissimo l'evento onMouseOver abbinato ad onMouseOut per creare l'effetto RollOver.
La sintassi è molto semplice:
<A HREF="#" onmouseover="document.images[num].src='immagine.gif'" onmouseout=document.images[num].src='immagine1.gif'">
dove il cancelletto sostituisce qualsiasi altro link, mentre num è il numero di indice dell'immagine nella pagina HTML.
Qualche anno fa, quando non esistevano programmi come Flash, il rollover era l'effetto grafico più diffuso e certamente quello più adatto a rendere dinamico un sito e amovimentare elementi statici come i menu e le barre di navigazione.
Per esempio inserisco un rollover un po' complesso, quello attivabile da una mappa cliccabile. Da notare che per funzionare in Netscape c'è bisogno di aggiungere comunque un link all'area sensibile, evidenziata in rosso (anche se sostituito dal segno del cancelletto), mentre in Explorer si può omettere.
<area shape="rect" coords="2,2,59,26" onmouseover="document.images[num].src='http://html.it/guide/img/guida_javascript/tre.gif'" href="#">
 |
 |
Attenzione! images[num] individua il numero di indice della figura nella pagina e si ottiene contando il numero dei tag IMG contando da 0 fino a giungere al tag della figura che ci interessa.
Ultimi articoli JavaScript
PhantomJS, headless browser per test con JavascriptIl tool ideale per realizzare, da terminale, operazioni in remoto su... |
Creare e leggere QR Code in JavaScriptApplicazioni 'QR Code enabled' per il Web e per il mobile,... |
Jquery UI Map: web-mapping con Google Maps e jQueryUn plugin di jQuery UI per intefacciare applicaizoni Web/mobile con... |
Scrollorama e Scrolldeck, slideshow d'effetto con jQueryPlugin jQuery per ottenere Slideshow con diversi effetti di scrolling |
jCanvas, un primo semplice graficoAlla scoperta della libreria jCanvas, per semplificare il disegno e... |
Guide JavaScript
Guida Node.jsIl framework che permette di per usare V8, l'interprete JavaScript... |
Canvas, guida ai frameworkCanvas, tra gli elementi di HTML5 è forse quello di maggior impatto.... |
Guida Javascript: tecniche avanzateUna guida dal taglio pratico per approfondire la programmazione a... |
Newsletter @JavaScript
Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso JQuery e Ajax per Webmaster03 Luglio 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |