Changer le curseur dans une page web

Un petit effet de rétro-action qui existe depuis fort longtemps, le changement d'aspect du curseur, trouve peu à peu sa stabilité. Il devient à présent très facile de créer quelque chose d'universel, reste alors à la charge de l'utilisateur de bien l'utiliser et surtout à bon escient en fonction de la mise en évidence souhaitée pour l'utilisateur. Car au-delà d'être un effet visuel, le changement de curseur doit avant tout informer le lecteur.

Changement de curseur en CSS

La première solution consiste à utiliser le CSS. On voit en effet beaucoup de solutions en javascript, et il a longtemps fallu les utiliser. Mais maintenant que la propriété CSS du cursor est en passe d'être implémentée dans tous les navigateurs, ce sera la solution la plus simple si vous avez opté pour l'utilisation du CSS dans votre site web.

Ci-dessous 3 comportements différents :

hello, nothing changes here !

hello, do you see the cursor ?

Alors, lesquels de ces comportements on été modifiés par le CSS ? Le 2eme et le 3eme. Pas mal hein. Et oui, vous n'avez peut-être pa remarqué mais par défaut, le curseur change lorsque la souris passe sur du texte pour montrer à l'utilisateur qu'il peut sélectionner le texte. On agira donc souvent sur la pseudo-propriété hover pour affecter le changement seulement au survol.

Dans le cas ici présent, le 2eme utilise un curseur par défaut et le 3eme un curseur personnalisé.

Utiliser un curseur par défaut

Les curseurs par défaut sont au nombre de 16. Ils sont principalement constitués de flèches indiquant des orientations (cas de redimensionnement de zone par exemple), plus quelques autres.

  • default
  • pointer
  • help
  • text
  • wait
  • progress
  • crosshair
  • move
  • e-resize
  • w-resize
  • n-resize
  • s-resize
  • ne-resize
  • sw-resize
  • nw-resize
  • se-resize

Ceci étant dit, il suffira dans notre code CSS d'inscrire cet valeur à la propriété cursor :

p{cursor:help}

pour affecter tous les paragraphes ou encore

p#intro{cursor:help}

pour affecter uniquement le paragraphe nommé intro

Nous contacter

Nous contacter