Personnaliser le curseur pour son site web

© Christian PAULUS. Document créé le 15 novembre 2011 , mis à jour le 16 novembre 2011.

Un seul arbre qui tombe fait plus de bruit qu'une forêt qui pousse. Proverbe africain

Accueil du site > Astuces > CSS > Personnaliser le curseur pour son site web

Ergonomie / CSS

Dans le joyeux monde de la norme CSS que les éditeurs de logiciels mettent parfois une volonté farouche à dénigrer, découvrons comment personnaliser le pointeur de la souris, plus communément appelé curseur (cursor).

Les attributs CSS de base pour un curseur

Les attributs disponibles en CSS-2 pour le curseur de la souris :

  • auto : curseur normal
  • default : curseur standard
  • crosshair : croix
  • pointer : flèche
  • move : croix avec flèches symbolisant la possibilité de déplacer l’élément
  • n-resize : flèche pointant vers le haut (n : nord)
  • ne-resize : flèche pointant vers le haut à droite (ne : nord-est)
  • e-resize : flèche pointant vers la droite (e : est)
  • se-resize : flèche pointant vers le bas à droite (se : sud-est)
  • s-resize : flèche pointant vers le bas (s : sud)
  • sw-resize : flèche pointant vers le bas à gauche (sw : sud-ouest)
  • w-resize : flèche pointant vers la gauche (w : ouest)
  • nw-resize : flèche pointant vers le haut à gauche (nw : nord-ouest)
  • text : point d’insertion texte
  • wait : attente (montre, ....)
  • help : icone d’aide
  • url([fichier]) : version graphique du curseur

Une version illustrée (avec les icones respectives) est consultable sur javascriptkit.com

La compatibilité des browsers est relativement bien décrite dans ce document Cursor styles de quirksmode.org (en). En gros, à part Konqueror, et IE6-7, la plupart des attributs de cursor sont respectés.

Les formats de fichier acceptés pour modifier son curseur

En ce qui concerne l’attribut url qui permet de préciser un fichier image en remplacement de l’icone de la souris, si l’on en croit mozilla.org (en), c’est une magnifique avancée technologique. En résumé

Extrait :

Browser Lowest versionLformats (e.g.) x-y-coordinates
Internet Explorer 6.0 *.cur *.ani
Firefox (Gecko) Windows and Linux 1.5 (1.8) *.cur *.png *.gif *.jpg
Firefox (Gecko) 4.0 (2.0) *.cur *.png *.gif *.jpg *.svg
Safari (Webkit) 3.0 (522-523) *.cur *.png *.gif *.jpg

L’exposé des dégâts (compatilbilté/incompatiblité cursor style pour les navigateurs) original est disponible sur cette page de Mozilla.org.

Et la génération de fichier de type CUR ou ANI est plutôt complexe sur MacOS (novembre 2011).

Compliqué ? Non, pas vraiment.

Convertir un .gif en .cur

ImageMagik est une librairie incontournable. Outre les librairies indispensables sous PHP, son installation propose quelques commandes bien pratiques.

Pour les plus aguerris, installer ImageMagik sur son poste de travail n’est pas très compliqué, et permet d’accéder à certaines commandes puissantes, telle que convert.

Ainsi, pour convertir un fichier GIF en CUR :

convert mon_fichier.png mon_fichier.cur

devrait donner un bon résultat.

Le bon format d’un fichier cursor

Comme indication, on trouve de tout sur Internet. Du 32 pixels de large, voire 128. Mais y-a-t-il une logique ? Autre que celle de la résolution de l’écran, qui augmente chaque mois un peu plus (les développeurs iPhone/iPad, avec une clone touch qui se complique ces derniers mois, me comprendont). A quand un format image indépendant de la résolution (svg ou autre qui convienne à tous)

Un peu de lecture sur cursor

Plussoyez !

Les forums sont fermés.