L'apparence du curseur

En respectant les standards du web, on ne peut pas dire que nos pointeurs de souris soient aux anges. Pour beaucoup de personnes ce n'est qu'une fantaisie réservée aux webmestres débutants prêts à tout pour épater la galerie. Pas si sûr. Dans des cas précis, le pointeur peut être un indicateur intéressant.

Comme c'est le cas sur Tutoweb, j'utilise le curseur help pour les abréviations et les acronymes. D'autres sites font appel au déplacement de calques par drag and drop indiqué par une le curseur move.

Ajouter un style (CSS)

Le changement du pointeur est relativement simple à réaliser via une feuille de style. Ce code sera ensuite appelé via une balise <span> sur du texte ou une image. Dans votre fichier CSS, remplacez la valeur help par le code HTML qui vous convient (voir le tableau plus bas).

  1. .curseur-aide {
  2. cursor: help;
  3. }

Passer votre curseur au-dessus des images pour voir les changements. Il se peut que ce changement ne corresponde pas à l'image car cela dépend de votre navigateur.

Apparences du curseur
Image Code HTML Image Code HTML
cursor default default cursor ne resize ne-resize
cursor hand hand cursor n resize n-resize
cursor crosshair crosshair cursor no resize nw-resize
cursor text text cursor o resize w-resize
cursor wait wait cursor sw resize sw-resize
cursor help help cursor s resize s-resize
cursor e resize e-resize cursor se resize se-resize

 

Apparence du curseur
Image Code HTML Image Code HTML
cursor image url(image.cur) cursor progress progress
cursor url url(image.ani) cursor vertical text vertical-text
cursor move move cursor copy copy
cursor all scroll all-scroll cursor alias alias
cursor colresize col-resize cursor cell cell
cursor rowresize row-resize cursor grab grab
cursor no drop no-drop cursor grabbing grabbing
cursor not allowed not-allowed    

Curseur personnalisé

Vous êtes nombreux à me demander comment ajouter un curseur personnalisé comme la petite flèche jaune ou bleue. Je rappelle que cela ne fonctionne pas sous Firefox. Dans un premier temps, il faut trouver l'image qui vous convient. Pour cet article, j'ai été chercher les deux curseurs sur FreeGaia.

Les images qui permettent de changer l'apparence du curseur de la souris contiennent l'extension .cur ou .ani pour les curseurs animés. Ce fichier doit être placé à un endroit précis. Dans l'exemple, je l'ai mis dans le dossier « images ». N'oubliez pas de le transférer sur le serveur. Ensuite, il faut indiquer ce chemin dans la feuille de style.

  1. .url-cur {
  2. cursor: url(images/3dgarro.cur);
  3. }

Dans cet exemple, l'effet n'agit qu'au survol d'une image. Il est possible de le faire pour l'entièreté du site mais je vous le déconseille vivement puisqu'il n'est plus question alors d'informer l'utilisateur mais de lui imposer vos goûts.

  1. <head>
  2. <style type="text/css">
  3. body {
  4. cursor: crosshair;
  5. <style type="text/css">
  6. </head>

Pour avoir une information plus complète sur les apparences du curseur et les navigateurs qui les supporte, rendez-vous sur CSS Cursors.

 

Réalisé le 13 avril 2005.
Mis à jour le 4 mai 2006.
haut