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).




14/11/2007
1 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 142 autres membres