Contenuto
- Cursori di base del mouse
- Cursori del mouse personalizzati
- Modifica dello stile del cursore con Inline Javascript
- Giocare con le funzioni
Cambiare il cursore del mouse è un modo semplice per aggiungere effetti speciali alla tua pagina web. Ciò può migliorare l'usabilità fornendo agli utenti ulteriori strumenti visivi, specialmente su pagine più complesse come giochi e mappe interattive. Puoi usare Javascript per cambiare lo stile del cursore in base alla data, al meteo e qualsiasi altra cosa. La tecnica di usare Javascript, HTML e CSS per creare pagine web dinamiche è conosciuta come DHTML (HTML dinamico).
Cursori di base del mouse
Esistono diversi cursori standard del mouse che possono essere utilizzati modificando lo stile di un elemento o il corpo della pagina. I nomi sono predefiniti, mirino, mano, mossa, testo, attesa e aiuto. Vedi il link "Proprietà Cursore CSS" nella sezione "Risorse" per maggiori dettagli su di loro. Usa CSS per definire il cursore che verrà visualizzato quando passi sopra un elemento come segue:
Cross-capelli
Cursori del mouse personalizzati
Oltre ai cursori di base, è possibile utilizzare modelli personalizzati impostando l'indirizzo di un file immagine come stile del cursore, come nell'esempio seguente:
Cursore personalizzato
Non tutti i browser supportano questa funzione o tutti i tipi di file. Ad esempio, Internet Explorer prevede file con estensione ".cur" o ".ani". Firefox non accetta cursori animati (".ani") e si aspetta un cursore di base oltre l'immagine. Per risultati ottimali, indicare un file cursore (".cur" o ".ani"), un file immagine (PNG, JPEG o GIF) e un tipo di cursore di base come backup. Nell'esempio seguente viene utilizzato un cursore animato come prima scelta, un file semplice in secondo luogo e il cursore di base come ultima opzione. Il browser proverà tutte le opzioni finché non ne trovi una che puoi usare:
Cursore personalizzato
La libreria Open Cursor nella sezione Risorse offre raccolte di cursori del mouse gratuiti.
Modifica dello stile del cursore con Inline Javascript
Puoi cambiare lo stile CSS del cursore usando Javascript. Esistono diversi attributi HTML relativi alle azioni del mouse che possono essere utilizzati per eseguire il codice facendo clic, spostando o passando con il mouse su un elemento della pagina. Alcuni esempi sono:
onmouseover: il puntatore del mouse passa sopra un elemento. onmousedown: il pulsante del mouse viene premuto. onmouseup: il pulsante del mouse viene rilasciato. onmouseout: il puntatore del mouse esce dall'elemento. ondblclick: l'utente fa doppio clic del mouse.
Nella sezione "Attributi" della sezione "Attributi" troverai più attributi che puoi usare per aggiungere azioni con Javascript.
Aggiungi un'azione a un evento (ad esempio "mouseover") impostando il codice che desideri eseguire come valore dell'attributo. Nell'esempio seguente, il cursore cambierà in "guida" passando con il mouse sopra il collegamento.
Aiuto
Giocare con le funzioni
A volte, ti consigliamo di fare più di un attributo. Scrivendo tutte le azioni in una funzione Javascript, puoi inserire tutto il codice nella parte superiore del documento HTML e applicarlo a qualsiasi elemento effettuando una chiamata nell'attributo evento. Il seguente codice cambia il cursore sull'elemento passato come parametro "el":
function setElementCursor (el) {el.style.cursor = "url (3DArrow.cur), mirino" GO}
La funzione si troverà nella sezione di script dell'intestazione del documento (tra i tag
e ) o in un file di codice esterno a cui si fa riferimento nella stessa parte. Per usarlo, chiama la funzione con la parola chiave "this" da un attributo evento in un tag HTML. La funzione riceverà un riferimento all'elemento associato all'evento del mouse e cambierà lo stile del cursore. Ad esempio, se il puntatore salta sul testo seguente, il cursore cambia:Il cursore cambierà su questo link
Puoi anche cambiare il cursore principale che verrà visualizzato quando passerai il mouse sulla parte inferiore della pagina. La seguente funzione ti permetterà di cambiare il cursore al tipo indicato nel parametro "curtype":
function setMainCursor (curtype) {switch (curtype) {case "loading": document.body.style.cursor = "url (working.ani), url (working.png), wait"; break GO case "forbidden": document.body.style.cursor = "url (non disponibile.ani), url (non disponibile.png), predefinito"; break GO case "default": default: document.body.style.cursor = "url (arrow.cur), default" GO}}
Per usarlo, chiamalo "loading", "forbidden" o "default" da un attributo evento in un tag HTML. Ad esempio, il seguente pulsante cambierà il cursore in "caricamento" quando si fa clic:
La lingua Javascript ha funzionalità illimitate. Il codice seguente eseguirà il conto alla rovescia e ogni secondo cambierà il cursore del mouse in un'immagine associata al valore corrente. La funzione "setTimeOut" lascerà la funzione sospesa per un secondo prima di essere richiamata e aggiornare il contatore.
function doCountdownCursor (count) {document.body.style.cursor = "url (" + count + ".ani), url (" + count + ".png) {setTimeout ("doCountdownCursor (" + count + ")", 1000) GO} else {document.body.style.cursor = "url (arrow.cur), predefinito" GO}}
Nella pagina Web, utilizzare la funzione per visualizzare il conteggio sul cursore del mouse quando si fa clic su un pulsante in un modulo.