Cambiare il puntatore del mouse nel blog

Una cosa che mi è stata richiesta da più persone è come fare a cambiare l'icona del mouse nel blog, ottenendo un effetto simile a quello che si vede nel blog di Daniela. La cosa è abbastanza semplice e non richiede nemmeno di modificare il template di Blogger, basta solamente aggiungere in nuovo elemento del codice HTML che ora vado a spiegare, con qualche premessa.

Cos'è un puntatore?

Il puntatore del mouse non è altro che una semplice immagine (nei formati GIF o PNG) o un'animazione (generalmente un file con estensione ANI, CSR o CUR) che il sistema operativo carica e visualizza su schermo. La dimensione massima consigliabile (per compatibilità con vecchie versioni di Windows) per un puntatore è di 32x32 pixel. Per compatibilità tra Firefox e Internet Explorer, è sempre preferibile utilizzare solo immagini in formato PNG o GIF o animanzioni in formato CUR. Ovviamente, per poterle utilizzare nel blog, dovranno essere pubblicati in rete tramite Skydrive, Imageshack o servizio analogo.

Potete utilizzare un puntatore già presente in rete, ma tenerne una propria copia è sempre la cosa migliore da fare.

 

Dove trovarli?

Ci sono diversi siti che permettono di scaricare gratuitamente puntatori per il mouse, uno molto fornito è Totally Free Cursors, dove trovate oltre 5000 cursori divisi in categorie, che dovrete scaricare e pubblicare per conto vostro come accennato sopra. Un altro sito dove è possibile trovare immagini da usare come puntatori è Iconarchive. Potete però sempre creare con le vostre mani delle immagini GIF o PNG e pubblicarle in rete per utilizzarle come puntatori. Anche Freeiconsweb contiene un certo numero di immagini che potete utilizzare come puntatori.

Se trovate siti dove si trovano puntatori, vi prego di segnalarmeli affinchè possa farne un elenco per tutti.

 

Cambiamo il puntatore nel blog

Create un nuovo elemento di tipo HTML/JavaScript e incollate il seguente codice:

<style type="text/css">html, body {
cursor: url("immagine o animazione"), auto;
}</style>

Sostituendo "immagine o animazione" con l'indirizzo in rete di quello che avete deciso di usare come animazione. Per fare una prova, incollate il seguente codice:

<style type="text/css">html, body {
cursor: url("http://www.iconarchive.com/icons/fasticon/coffee-break/coffee-cup-32x32.png"), auto;
}</style>

che cambierà il puntatore del mouse in una tazzina di caffè.

 

Modificare il puntatore solo in certi punti

E' possibile modificare il puntatore non in tutto il blog ma solo per certe sue parti. Ad esempio è possibile personalizzare il puntatore del mouse quando si passa sui link col seguente codice:

<style type="text/css">a {
cursor: url("immagine o animazione"), auto;
}</style>

Come potete vedere, l'unica differenza rispetto al codice precedente è che ho sostituito la parte che prima era indicata con html/body (che rappresenta tutto il corpo della pagina web del blog) con a (che rappresenta solo i link). Ovviamente le porzioni di codice possono essere usate entrambe per avere magari due immagini diverse per link e resto del blog.

I più smaliziati potranno guardare nel codice html del proprio template per vedere quali tag CSS vengono utilizzati per sostituirne il puntatore.

Come sempre, per chiarimenti o maggiori informazioni, lasciatemi un commento.

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!