Je vous livre aujourd’hui une règle css qui permet de changer le curseur de la souris avec n’importe quelle image.

Vous pouvez donc tout de suite regarder le résultat en démo :

Démo

La mise en place est très simple. Il vous suffit de prendre une image en .png de préférence. Je me sers de celle-ci dans l’exemple précédent :

cursor

Et pour changer de curseur, il suffit d’appliquer ce code css sur la div sur laquelle on veut modifier ce dernier :


cursor: url("images/cursor.png"), pointer;

Pour mieux comprendre le fonctionnement je vais vous donner un autre exemple. Dans le premier exemple, je plaçais le code css sur les vignettes et sur la grande div du bas.
Imaginons que nous voulions changer le curseur sur l’ensemble de la page il suffirait de placer le code css sur le body.

Exemple

N’hésitez pas à partager ce tuto!!

15 comments
Kler
Kler

Excellent tutoriel, merci.

playdesign0123
playdesign0123

Bonjour quelqu'un connait le code pour modifier la couleur de la sélection de texte avec le curseur?

Très bon tuto, simple et clair!

playdesign0123
playdesign0123

@playdesign0123 En cherchant un peu dans le code source d'un site qui l'avait j'ai trouvé, 

Pour ceux qui voudraient: 


::selection {
 background:#ff9103;
    color:white
}
::-moz-selection {
    background:#ff9103;
    color:white
}


Bonne journée.

BlaiR
BlaiR

Bonjour, Merci pour ce tuto très simple et efficace. Cependant j'aimerais savoir si c'est possible de changer la forme du curseur lorsque je suis sur du texte (comme quand le curseur change de forme lorsqu'on sélectionne du texte). J'ai appliqué cette propriété dans ma balise , jusque là ça marche, mais je suis maniaque et j'ai remarqué que le curseur change de forme aussi sur les espaces vides :/ Si vous avez une solution je suis preneur! :D

admin
admin

Bonjour, tout d'abord merci pour ton commentaire. Tu as essayé de cibler le conteneur de ton texte ?

rudy
rudy

Sympa le tuto ! Il faut un une extension .cur pour le faire fonctionner sur tous les navigateurs ! ( Un peu comme le .ico pour l'icône à afficher dans l'onglet d'un navigateur ). On peut combiner un png et une extension cur dans le css. Genre : div { cursor:url(smiley.gif),url(myBall.cur),auto; }

Cocoduf
Cocoduf

Savez-vous comment centrer l'image du curseur avec la pointe de la souris ?

admin
admin

Il me semble que le fonctionnement est le meilleur comme cela car sinon il y a une zone de conflit

Gabriel
Gabriel

Super concept ! Effectivement, testé sur firefox et ie. Malheureusement pour ie (comme souvent) ça ne fonctionne pas ¨¨! En tout cas merci !

Simon
Simon

Tutoriel intéressant et utile pour certain application. Dommage qu'il reste un problème de taille avec certain navigateur.

Clément
Clément

Tuto parfait, simple et clair. Je ne connaissais pas, maintenant je l'utilise, merci bien !

med
med

Bonsoir tout d'abord je tiens a vous remercier pour tes superbe tutos. Malheureusement ce tuto ne marche plus chez moi et j'ai essayé sur plusieurs navigateur mais le cursor ( cursor.png ) ne s'affiche pas. Merci de m'aider s'il vous plait et merci encore une autre fois.

James Clark
James Clark

Vraiment sympa comme tutoriel !! Bravo! Quid de la compatibilité de cette technique sur les différents navigateurs .. ?

admin
admin

Tout d'abord merci pour ton commentaire. Ensuite je te dirai honnêtement que je n'ai suis pas allé plus loin que les dernières versions de Firefox, chrome et safari (ce code fonctionne sur tous ces navigateurs). Sur opera le curseur ne change pas, et pour ce qui est d'Internet Explorer je n'ai pas eu l'occasion de tester

James Clark
James Clark

Merci pour la réponse, je viens de tester via Ietester : le changement du curseur vers la main s'opère sur toutes les versions d'internet explorer à partir de IE6. Donc le bilan est très positif en terme de compatibilité. Même si sur aucune version d'internet explorer ne permet de voir la croix, ce n'est pas grave, les internautes n'ont qu'à utiliser les navigateurs récents et puis c'est tout !! :D Donc message final, vraiment du bon travail ! En attendant d'autres tuto avec impatience. Bonne continuation !