Come modificare la forma del mouse con i fogli di stile.

Comepersonalizzare il cursore con i CSS in funzione della zona in cui viene posizionato.

Vi sarete certamente accorti che la forma del cursore varia a seconda di dove viene posizionato. In linea di massima per esempio se si tratta di un campo di testo allora la forma del mouse sarà quella di una linea verticale intermittente mentre l'aspetto più comune è quello di una freccia bianca leggermente inclinata verso sinistra. Non è raro quando si naviga su internet di vedere il mouse che prende la forma di un punto interrogativo quando per esempio si passa sopra a un paragrafo o un link con delle info.

Anche un blogger alle prime armi può "stupire" i propri lettori mostrando un cursore personalizzato con i CSS a seconda della zona del post in cui lo posizionano. Non mi riferisco alla modifica pura e semplice del mouse che si vede in molti blog femminili con animaletti, oggetti grafici carini e altre amenità. Per questo tipo di modifiche si possono seguire le istruzioni su come personalizzare il cursore.

Mi riferisco invece alle forme classiche supportate da tutti i principali browser. La regola per modificare l'aspetto del mouse è la seguente

cursor: NOME DEL CURSORE;

dove al posto di NOME DEL CURSORE  si mette quello prescelto come mostrato a fondo pagina

 

Per utilizzare una di queste forme dobbiamo inserire il tag style in un link, in un paragrafo, in una immagine o in altra posizione in cui sia possibile inserire. I meno esperti possono scaricare il mio ebook gratuito Guida all'HTML e al CSS. Ecco alcuni esempi:

<div style="cursor:wait; color:#00f;">Puntatore a forma di cerchio animato</div>

<img style="cursor:help;" src="http://lorempixel.com/400/200" /> con il mouse a forma di punto interrogativo

ed ecco l'elenco pressoché completo di tutte le possibili personalizzazioni

ne-resize
col-resize
progress
text
vertical-text
help
e-resize
se-resize
s-resize
sw-resize
nw-resize
w-resize
move
wait
crosshair
no-drop
row-resize
not-allowed