HTML - les curseurs
Divers curseurs
Divers curseurs
Fiche PC Astuces sur divers curseurs communs
Changement du curseur sur un lien
Pour transformer la traditionnelle main lors du passage du curseur sur un lien sur votre site Web, utilisez l'attribut style suivit du nom du curseur dans l'attribut lien. Voici le résultat que vous obtiendrez :
Bien évidemment il vous est possible de changer l'attribut help dans l'exemple ci-dessus par l'attribut de votre choix. Vous trouverez ci-dessous la liste des différents attributs correspondants aux différents styles de curseurs disponibles.
| La croix | style="cursor:crosshair" |
| La flèche | style="cursor:default" |
| La main | style="cursor:hand" |
| Le déplacement | style="cursor:move" |
| Le texte | style="cursor:text" |
| Le sablier | style="cursor:wait" |
| L'aide | style="cursor:help" |
| Flèche droite | style="cursor:e-resize" |
| Flèche gauche | style="cursor:w-resize" |
| Flèche bas | style="cursor:s-resize" |
J'ajoute à cette fiche, la possibilité de mettre également une image, "hand" ne fonctionne pas avec mon IE7, donc dans ma feuille de style j'ai indiqué l'adresse d'une image représentant une main et maintenant ça marche. Harrow.cur n'est pas une flèche comme son nom l'indique
Le choix du nom de cette image est tout simple, si je veux changer mon curseur, je renomme la nouvelle image "harrow" ainsi je n'ai pas à modifier les différentes feuilles de style que j'utilise en dehors de Bric à Brac.
Ci-dessous pour exemple ma règle de style a:hover, toutes ces balises auront la main comme curseur...
a:hover {
text-decoration: none;
color: #F23115;
background: #FDD5A8;
padding: 0px 2px 2px 2px;
font: bold 13pt;
cursor: url("http://notreespace.neuf.fr/images/harrow.cur"); }
Il est évident qu'il est toujours possible de mettre un curseur différent pour un lien spécifique, comme l'exemple de PC Astuces, en CSS c'est le style le plus proche qui règle la présentation (style interne).
