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
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> 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 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 .
Divertimento con funzioni
Informazioni correlate
Programmazione © www.354353.com