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

Cursori del mouse di base

Ci sono diversi puntatori del mouse di default che possono essere utilizzati, modificando lo stile di un elemento della pagina o il corpo del documento. Questi stili cursore comprendono predefinita, mirino, invece, spostare, testo, wai e di aiuto. Vedere "Il cursore Proprietà CSS" legato nella sezione Risorse per tutti i dettagli su tutti gli stili del cursore di base. Lo stile del cursore visualizzato quando si libra sopra un elemento può essere impostata usando i CSS, come in questo esempio:

<a style=\"cursor:crosshair\" href=\"#\"> Cross-capelli </a>

Cursori del mouse personalizzati

Oltre ai cursori di base, cursori personalizzati possono essere usati impostando lo stile cursore l'indirizzo di un file di cursore o immagine, come nel seguente esempio:

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

Browser supportati per stili cursore e tipi di file è incoerente. Ad esempio, Internet Explorer si aspetta che i file cursore con cur o estensione .ani. Firefox non ama i 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 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 di pianura come la seconda scelta e il cursore di base predefinito come l'ultima opzione di ripiego. Il browser tenterà ogni opzione fino a quando ne trova uno che può usare.

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

La "Open libreria di cursori" legato nella sezione Risorse propone collezioni cursore del mouse libera, senza problemi.

Modificare lo stile del cursore con linea Javascript

È possibile modificare il cursore del mouse di stile CSS con Javascript. Ci sono diversi attributi HTML relativo alle azioni del mouse è possibile utilizzare per eseguire JavaScript quando il mouse viene cliccato, spostato o aleggiava un elemento della pagina web. Alcuni di questi attributi sono:

onmouseover: puntatore del mouse passa sopra l'elemento
onMouseDown: il pulsante del mouse premuto
onmouseup: tasto del mouse rilasciato
onMouseOut: Mouse puntatore si sposta fuori dell'elemento
onclick: pulsante del mouse cliccato
ondblclick: il pulsante del mouse doppio clic

Fare riferimento al link "eventi Attributi" nella sezione Risorse per ulteriori evento attributi è possibile utilizzare per aggiungere azioni JavaScript.

Aggiungere un'azione Javascript ad un evento, ad esempio un mouse-over, semplicemente impostando il valore dell'attributo al codice JavaScript che si desidera eseguire. In questo esempio, il cursore viene modificato il cursore di base "aiuto" al passaggio del mouse sopra il link:

<a onmouseover=\"this.style.cursor='help';\" href=\"#\"> Aiuto </a>

Divertimento con funzioni

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

function setElementCursor (el) {
el.style.cursor = \"URL(3DArrow.cur), crosshair\"

ANDARE

}

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

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

È inoltre possibile modificare il cursore principale che viene visualizzato quando il cursore si aggira sulla sfondo della pagina web. Questa funzione Javascript che imposta il cursore del mouse per il corpo della pagina web principale basata sul valore passato alla funzione come parametro "CurType":

function setMainCursor (curtype) {
switch (curtype) {
case \"loading\" : document.body.style.cursor = \"URL(working.ani), URL(working.png), wait\" ; break

ANDARE

case \"forbidden\": document.body.style.cursor = \"URL(unavailable.ani), URL(unavailable.png), default\" ; break

ANDARE

case \"default\":
default: document.body.style.cursor = \"URL(arrow.cur), default\"

ANDARE

}
}

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

<Input type = \ "submit \" onclick = \ "javascript: setMainCursor ( 'carico'); \" />

Non c'è limite a quello che si può fare con funzioni Javascript. La seguente funzione esegue un conto alla rovescia cambiando il cursore principale del mouse ogni secondo per un'immagine cursore associato con il conteggio corrente. La funzione setTimeOut viene usata per provocare la funzione di dormire per un secondo prima di essere chiamato di nuovo con il conteggio aggiornato.

function doCountdownCursor (count) {
document.body.style.cursor = \"URL(\" + count + \".ani), URL(\" + count + \".png), wait\"

ANDARE

count--

ANDARE

if (count > 0) {
setTimeout (\"doCountdownCursor (\" + count + \")\", 1000)

ANDARE

}
else {
document.body.style.cursor = \"URL(arrow.cur), default\"

ANDARE

}
}

Nella pagina web, utilizzare questa funzione per avere contare il cursore del mouse verso il basso da 10 quando un modulo pulsante di invio viene cliccato.

<Input type = \ "submit \" onclick = \ "javascript: doCountdownCursor (10); \" />