Accueil > Manip’s > CSS > CSS : Changer le curseur d’un Objet HTML
CSS : Changer le curseur d’un Objet HTML
cursor
dimanche 6 juin 2010, par
Il est possible de changer l’aspect du curseur par défaut au passage au dessus d’un objet HTML ?
Cette manip se fait au niveau de la feuille de style
Imaginons qu’on veuille placer une loupe au dessus des IMAGES, le clic activant une fonction de ZOOM.
Il faut modifier la propriété
cursor
de l’objet
img
UTILISATION DE LA BIBLIOTHEQUE INTEGEREE
img {
cursor : default ;
}
Restaure le curseur par défaut
img {
cursor : pointer ;
}
Correspond à la MAIN
img {
cursor : help ;
}
Correspond au point d’interrogation
POUR AJOUTER UNE IMAGE PERSONNALISEE
Il est bien sûr beaucoup plus fun, d’ajouter une icône personnalisée, et c’est la que ça coince, car IE et les autres ne réagissent pas de la même façon
IE n’admet que des fichiers CUR ou ANI de WINDOWS
img {
cursor : url ( "magnify.cur") ;
}
Vous constatez si vous êtres sous Firefox qu’il ne se passe strictement rien
Il faut utiliser l’instruction suivante
img {
cursor : url ( "icone_zoom.png"),auto ;
}
Utilisation d’une image quelconque
- Mais dont la taille ne doit pas dépasser 32px * 32 px
Instruction URL suivie de virgule puis auto
Il est tout a fait possible de combiner les 2 instructions
img {
cursor : url("icone_zoom.png"), auto ;
cursor : url("magnify.cur") ;
}
