Changer l'aspect du curseur en CSS

Dernière mise à jour le 20 décembre 2009 à 13:46 par Dora The Explorer
Publié par RAD ZONE
La propriété cursor permet de changer l'aspect du curseur sur un élément d'une page web.
Le client affichera automatiquement le curseur de son ordinateur qui correspond au type de curseur que vous aurez choisi.


Exemples


Exemple d'un style en forme de croix donné au curseur sur le "body" de votre page
body{
  cursor:crosshair;
}


On peut bien sûr donner des styles différents à plusieurs éléments de la même page.
Exemple d'un style en forme de croix sur le "body" agrémenté d'un style en forme de sablier sur les images et de la main sur les liens.
body{
  cursor: crosshair;
}
img{
  cursor: wait;
}
a:link{
  cursor:  pointer;
}


Pour finir, on peut même attribuer un curseur personnel à une page.
Il suffit de mettre dans le code CSS à la balise voulue en partant du principe que votre curseur est dans le dossier courant:
cursor: url('votre_curseur_perso.cur'), pointer; 

Il existe beaucoup de logiciels capables de créer des curseurs personnels, le mieux étant de partir des curseurs d'origine et de les modifier, en prenant soin de sauvegarder avant toute manipulation (sous Windows, ils se trouvent dans C:windowscursors).
Exemple de logiciel: Znsoft IconMaker
La taille des curseurs ne doit pas excéder 32x32 px.

Liste des attributs possibles de cette propriété


Voir également :
http://zonecss.free.fr/code_javascript_css/code_javascript_css_cursor.html

Acceptés par tous les navigateurs

  • auto : Aspect identique à celui du curseur par défaut sur la balise qui possède l'attribut, ne change rien.
  • default : Curseur par défaut du navigateur.
  • pointer : Curseur en forme de main avec le doigt déplié.
  • text : Curseur d'édition de texte.
  • help : Curseur d'aide.
  • wait : Curseur d'attente
  • progress : Curseur de progression.
  • move : Curseur de déplacement.
  • crosshair : Curseur en forme de croix.

Curseurs de redimensionnement

  • n-resize : Curseur de redimensionnement bas vers haut.
  • s-resize : Curseur de redimensionnement haut vers bas.
  • e-resize : Curseur de redimensionnement gauche vers droite.
  • w-resize : Curseur de redimensionnement droite vers gauche.
  • ne-resize : Curseur de redimensionnement bas-gauche vers haut-droite.
  • nw-resize : Curseur de redimensionnement bas-droite vers haut-gauche.
  • se-resize : Curseur de redimensionnement haut-gauche vers bas-droite.
  • sw-resize : Curseur de redimensionnement haut-droite vers bas-gauche.


Note : En fait, il est très simple de se rappeler toutes ces propriétés d'un coup.
n, s, e, w correspondent à nord, sud, est, ouest, c'est-à-dire haut, bas, droite, gauche.
Il suffit d'indiquer la direction vers laquelle doit pointer le curseur, suivi bien sûr de "-resize".

Non accepté par tous les navigateurs


Firefox et Opera, entre autres, ignorent ces directives.
  • inherit : Même curseur que la balise parente.
  • not-allowed : Curseur en forme de rond barré.
  • no-drop : Curseur en forme de main avec le doigt déplié et un rond barré.
  • col-resize : Curseur fait de deux traits verticaux avec une flèche de chaque coté.
  • row-resize : Curseur fait de deux traits horizontaux avec une flèche de chaque côté.
Meilleures réponses pour « Changer l'aspect du curseur en CSS » dans :
Télécharger Theme Maker VoirPour obtenir de bons résultats, il faut travailler dans les meilleures conditions et un environnement de travail personnalisé. Theme Maker est un programme qui donne la possibilité de personnaliser, de créer ou de changer vos curseurs, vos icônes et...
CSS - Les couleurs VoirLes couleurs Le standard CSS propose différentes façons de définir des couleurs : par un nom avec la notation hexadécimale avec la notation décimale Appel d'une couleur par son nom Le langage HTML définit des noms pour un nombre limité de...
Déclaration d'une feuille de style (CSS) VoirDéclaration d'une feuille de style Les feuilles de style sont un sur-ensemble du langage HTML, cela signifie qu'elle ne sont pas intégrées directement dans les recommandations HTML du W3C. Ainsi, il est nécessaire de renseigner le code HTML avec...
Feuilles de style - CSS VoirPrésentation des feuilles de style Le concept de feuilles de style est apparu en 1996 avec la publication par le W3C d'une nouvelle recommandation intitulée « Cascading StyleSheets » (feuilles de style en cascade), notée CSS. Le principe des...