Certains d'entre vous ont peut-être déjà croisé des sites possédant des curseurs "personnalisés"... Pourtant celà n'a rien de particulièrement utile, sauf peut-être pour les chevronnés du webdesign.
Cet article va donc vous expliquer comment personnaliser le curseur de l'internaute qui navigue sur votre site en utilisant la propriété CSS cursor. A vous de voir les curseurs que vous préférez utiliser : des classiques ou des personnalisés.
Les curseurs classiques
Par défaut, on peut utiliser comme curseurs "classiques" les 16 possibilités par défaut du système d'exploitation. Voici les attributs de la propriété CSS cursor :
default :
Curseur par défaut (couramment une flèche)
auto :
Curseur dans le contexte courant
crosshair :
Curseur de ciblage
help :
Curseur d'aide
move :
Curseur de déplacement
pointer :
Curseur indiquant un lien
text :
Curseur de texte
wait :
Curseur d'attente
progress :
Curseur de progression
n-resize :
Curseur de redimensionnement Nord
nw-resize :
Curseur de redimensionnement Nord-Ouest
ne-resize :
Curseur de redimensionnement Nord-Est
s-resize :
Curseur de redimensionnement Sud
se-resize :
Curseur de redimensionnement Sud-Est
sw-resize :
Curseur de redimensionnement Sud-Ouest
w-resize :
Curseur de redimensionnement Ouest
e-resize :
Curseur de redimensionnement Est
Les curseurs personnalisés
Grâce au CSS, vous pouvez aussi définir un curseur totalement personnalisé, que vous aurez trouvé, voir même dessiné. Un curseur qui sera localisé à même votre site et qui vous permettra de pousser au jusqu'au détail le design de votre site.
Mais avant de commencer, il est important de savoir quel type d'image vous pouvez utiliser ; et vous avez le choix : GIF, JPG, PNG (pour une compatibilité sous Firefox) ainsi que le format de curseur CUR (qui vous assure une compatibilité avec IE et Firefox).
Exemple de syntaxe:
.classe {cursor:url(moncurseur.cur), auto;}
Dans l'exemple ci-dessus, on peut lire que tout les éléments ayant l'attribut class de valeur "classe" afficheront le curseur "moncurseur.cur" sinon le curseur classique "auto".
