Cambiare il cursore del mouse è un modo semplice per migliorare la tua pagina web con effetti speciali . Stili di cursore del mouse possono migliorare l'usabilità del tuo sito web , fornendo agli utenti un ulteriore feedback visivo , soprattutto per i più complessi, le pagine web con script , come giochi e mappe interattive . Javascript può essere usato modificare lo stile del cursore del mouse , che ti permette di modificare il cursore del mouse in base alla data di oggi , le previsioni del tempo o quasi qualsiasi altra cosa si possa immaginare . La tecnica utilizza Javascript , HTML e CSS insieme per creare pagine web dinamiche è DHTML ( Dynamic HTML ) . Cursori del mouse di base

Ci sono diversi cursori del mouse predefiniti che possono essere utilizzati , modificando lo stile di un elemento della pagina o corpo del documento . Questi stili includono cursore predefinito , mirino , mano, mossa , testo , wai e aiuto. Vedere " Il CSS cursore proprietà " legata nella sezione Risorse per tutti i dettagli su tutti gli stili del cursore di base . Lo stile cursore visualizzato quando si libra sopra un elemento può essere impostato utilizzando i CSS , come in questo esempio :

style="cursor:crosshair" href="#"> Cross- capelli < /a>
cursori del mouse personalizzati

Oltre ai cursori di base , cursori personalizzati possono essere utilizzati , impostando lo stile del cursore per l'indirizzo di un file di cursore o di immagine , come in il seguente esempio :

style="cursor:url(arrow.cur), default" href="#"> cursore personalizzato < /a>
sostegno Browser

per cursore stili e tipi di file non è coerente . Ad esempio , Internet Explorer si aspetta file cursore con . Cur o estensioni . Ani . Firefox non piace cursori animati (file . Ani ) , e si aspetta un cursore di base per essere elencati in aggiunta al cursore o file immagine . Per ottenere i migliori risultati tra i browser , fornire un file di cursore ( . Cur o . Ani ) , un file di immagine ( PNG, JPEG o GIF) , e un tipo di cursore di base come ripiego . Questo esempio utilizza un cursore animato per la sua prima scelta , un file cursore pianura come la seconda scelta e il cursore di base predefinita come opzione finale di ripiego . Il browser cercherà ogni opzione fino a trovarne uno che possa usare .

Style="cursor:url(arrow.ani), url(arrow.cur), default" href="#"> , cursore personalizzato < /a>

"Open Cursor Library" legato nella sezione Risorse offre gratis, collezioni senza problemi di cursore del mouse
Modificare lo stile del cursore . con Inline Javascript

È possibile modificare il cursore del mouse di stile CSS con Javascript. Ci sono diversi attributi HTML relativi alle azioni del mouse è possibile utilizzare per eseguire Javascript quando si fa clic con il mouse , si trasferisce o si librava sopra un elemento della pagina web. Alcuni di questi attributi sono :

onmouseover : mouse passa sopra il puntatore elementonmousedown : Mouse pressedonmouseup pulsante : Mouse releasedonmouseout bottone : puntatore del mouse si sposta fuori della elementonclick : Mouse pulsante clickedondblclick : pulsante del mouse cliccato due volte
< p > consultare il link " attributi di eventi " nella sezione Risorse per ulteriori attributi degli eventi è possibile utilizzare per aggiungere azioni Javascript .

aggiungere un'azione Javascript ad un evento , ad esempio un mouse -over , semplicemente impostando il valore dell'attributo per il codice Javascript che si desidera eseguire. In questo esempio , il cursore viene modificato il cursore "help" di base quando il mouse passa sopra il link :

Guida < /a>
Divertimento con funzioni

a volte , si vuole fare di più che si adatta comodamente in un attributo action del mouse . Con la scrittura di tutte le vostre azioni in una funzione JavaScript , è possibile stipare tutto il codice nella parte superiore del documento HTML , e causare il magico cursore per accadere con una semplice chiamata di funzione in attributo di evento . Questa semplice funzione Javascript cambia lo stile del cursore per l'elemento di pagina web, passato come parametro "el" :

funzione setElementCursor ( el) { el.style.cursor = " url ( 3DArrow.cur ) , mirino " ; }

Questa funzione si trova in una sezione script nell'intestazione del documento ( tra e < /head> ) , oppure in un file di codice JavaScript esterno riferimento nell'intestazione del documento . Per utilizzare questa funzione , chiamare la funzione con la parola chiave "this" da un attributo di evento in un tag HTML . La funzione riceve un riferimento all'elemento pagina web associata all'evento del mouse , e cambia il suo stile di cursore. Per esempio, quando il puntatore del mouse viene spostato su questo testo collegato , il cursore visualizzato saranno impostati dalla funzione :

onmousemove="javascript:setElementCursor(this);" href="#"> impostare il cursore per questo link < /a>

è inoltre possibile modificare il cursore principale che viene visualizzato quando il cursore è in bilico su sfondo della pagina web . Questa funzione javascript che imposta il cursore del mouse per il principale corpo della pagina web in base al valore passato alla funzione come parametro " CurType " :

funzione setMainCursor ( CurType ) { switch ( CurType ) {case " loading" : document.body.style.cursor = " url ( working.ani ) , url ( working.png ) , aspetta " : $ messaggio = "proibito" : document.body.style.cursor = url " ( unavailable.ani ) , url ( unavailable.png ) , default " : $ messaggio = " default " : default: document.body.style.cursor = " url ( arrow.cur ) , di default ";} }

Per utilizzare questa funzione , chiamare la funzione con il " carico ", il valore "proibito " o "default" da un attributo di evento in un tag HTML . Per esempio, questo modulo presenta pulsante chiama la funzione per impostare il cursore su " loading" , quando si fa clic sul pulsante :

< input type = " submit " onclick = "javascript : setMainCursor ( ' caricamento '); " />

non c'è limite a quello che si può fare con funzioni Javascript . La seguente funzione esegue un conto alla rovescia principale modificando il cursore del mouse ogni secondo per un cursore un'immagine associata al conteggio corrente . La funzione setTimeout viene utilizzata per causare la funzione di dormire per un secondo prima di essere chiamato di nuovo con il conteggio aggiornato .

Funzione doCountdownCursor ( count) { document.body.style.cursor = " url ( " + count + " . ani ) , url ( " + count + " . png ) , aspetta " , count - ; if (count > 0 ) { setTimeout ( " doCountdownCursor ( " + count + " ) " , 1000) ; } else { document.body.style.cursor = " url ( arrow.cur ) , di default ";} }

Nella pagina web, utilizzare questa funzione per avere il cursore del mouse conto alla rovescia da 10 quando il pulsante di un modulo di presentare si fa clic .