Personnaliser le curseur pour son site web
© . Document créé le 15 novembre 2011 , mis à jour le 16 novembre 2011.
L'amour... il y a ceux qui en parlent et il y a ceux qui le font. A partir de quoi il m'apparaît urgent de me taire. Pierre Desproges
Accueil du site > Astuces > CSS > Personnaliser le curseur pour son site web
Ergonomie / CSS
Mots-clés
- Personnaliser le curseur pour son site web
- Marges d’un bloc par défaut
- Changer de classe à la volée
- Centrer un bloc dans la page
- 4 colonnes en tableau sans tableau
- Contourner le code CSS avec des hacks
- Interprétation de em et ex
- Fond et image de fond (motif)
- Forcer font-weight pour IE 6
- Les propriétés CSS respectées sur PIE 2003
- Fontes Explorer, Firefox et PDA
- Dessiner un triangle en CSS
- Rappel sur le style
- Un éditeur de style
- Effets de style, filtres graphiques
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 |
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.
RSS 2.0
