Visualizziamo un puntatore del mouse diverso nelle nostre pagine web

Non tutti sanno che grazie all’ausilio di poche righe CSS è possibile modificare il cursore di default visualizzato in una pagina web.

Applicare questa modifica è semplicissimo ed è possibile scegliere se visualizzare un determinato cursore in una parte specifica della pagina oppure in tutta come anche se caricare un cursore presente nel sistema oppure uno particolare opportunamente creato. In quest’ultimo caso si dovrà trattare di un’immagine 16×16 a 256 colori con estensione .cur o .ani.

Ma andiamo direttamente al codice necessario per scegliere il cursore da visualizzare. Questo va inserito all’interno del file .css relativo alla pagina, oppure nella pagina stessa tra i tags <style> e </style> a loro volta inseriti nell’header.

Modificare il puntatore con un cursore esterno

L’esempio più semplice è questo:

body{
cursor: url(indirizzodelcursore.cur)
}

In questo caso il cursore verrà modificato per l’intera pagina. Possiamo scegliere di modificare il cursore soltanto in corrispondenza dei link, oppure modificarlo sia per la pagina che per i link, oppure scegliere due cursori differenti scrivendo qualcosa del genere:

body{
cursor: url(indirizzodelcursore.cur)
}
a, a:hover, a:visited{
cursor: url(indirizzodelcursore2.cur)
}

Ovviamente ci sarebbero altri 100 esempi come questo e come sempre il limite è la fantasia.

Un esempio live con il risultato potete vederlo nella mia pagina personale.

Modificare il puntatore attingendo dai cursori di sistema

Se invece vogliamo usufruire dei puntatori già presenti nel sistema di defualt, possiamo utilizzare un codice simile a questo:

body{
cursor:pointer;
}

In questo caso nella pagina verrà visualizzato il puntatore a forma di manina di default (quello che geenralmente appare sui links).

Riguardo le tipologie di puntatore di sistema richiamabili in questa maniera, basta sostituire al valore dopo il “cursor:“, quello desiderato seguendo questa tabella:

Icona	Valore	Esempio (passa nel box per vedere il risultato)	Compatibilità Browser
	auto	Il cursore viene assegnato automaticamente.	Tutti
	default	style=”cursor: default;”	Tutti
	hand	style=”cursor: hand;”	IE
	pointer	style=”cursor: pointer;”	NS/FF
	hand & pointer	style=”cursor: pointer; cursor: hand;”	Cross browser
	crosshair	style=”cursor: crosshair;”	Tutti
	text	style=”cursor: text;”	Tutti
	wait	style=”cursor: wait;”	Tutti
	help	style=”cursor: help;”	Tutti
	move	style=”cursor: move;”	Tutti
	e-resize	style=”cursor: e-resize;”	Tutti
	ne-resize	style=”cursor: ne-resize;”	Tutti
	nw-resize	style=”cursor: nw-resize;”	Tutti
	n-resize	style=”cursor: n-resize;”	Tutti
	se-resize	style=”cursor: se-resize;”	Tutti
	sw-resize	style=”cursor: sw-resize;”	Tutti
	s-resize	style=”cursor: s-resize;”	Tutti
	w-resize	style=”cursor: w-resize;”	Tutti
	progress	style=”cursor: progress;”	IE/FF
	all-scroll	style=”cursor: all-scroll;”	IE/FF
	col-resize	style=”cursor: col-resize;”	IE/FF
	no-drop	style=”cursor: no-drop;”	IE/FF
	not-allowed	style=”cursor: not-allowed;”	IE/FF
	row-resize	style=”cursor: row-resize;”	IE/FF
	url(uri)	style=”cursor: url(cursorepersonale.cur);”Nota: Il file .cur può essere sostituito con un .ani	IE/FF
	vertical-text	style=”cursor: vertical-text;”	IE6

NOTA: ovviamente se stiamo utilizzando questi valori all’interno di un file .css non è necessario includerli dentro style=”", ma basta metterli all’interno dell’id o la classe alla quale vogliamo assegnare il puntatore, sulla scia degli esempi riportati all’inizio.

Potete trovare agevolmente svariati cursori sia statici che animati (.ani) su internet in siti come cursors-4u e simili.

Che altro dire? Spazio alla fantasia!