Sur cette page, vous apprendrez comment créer un curseur personnalisé à l'aide de CSS en utilisant la propriété cursor.
La propriété CSS cursor est utilisée pour définir le type de curseur (c'est-à-dire le pointeur de la souris) lorsque la souris se déplace sur une certaine zone ou sur un lien de la page Web.
Les navigateurs affichent généralement le pointeur de la souris sur toute partie vide d'une page Web, la main gantée sur tout élément lié ou cliquable et le curseur d'édition sur tout texte ou champ de texte. Avec CSS, vous pouvez redéfinir ces propriétés pour afficher une variété de curseurs différents.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exemples d'utilisation de la propriété CSS cursor</title>
<style>
a {
cursor: url("/examples/images/custom.gif"), url("/examples/images/custom.cur"), default;
}
.cursor-demo span{
min-width: 100px;
padding: 5px 10px;
margin-bottom: 5px;
display: inline-block;
border: 1px solid grey;
border-radius: 3px;
}
</style>
</head>
<body>
<p>Placez le pointeur de votre souris sur une case pour faire apparaître le curseur.</p>
<div class="cursor-demo">
<span style="cursor: auto;">auto</span>
<span style="cursor: default;">default</span>
<span style="cursor: none;">none</span>
<span style="cursor: context-menu;">context-menu</span>
<span style="cursor: help;">help</span>
<span style="cursor: pointer;">pointer</span>
<span style="cursor: progress;">progress</span>
<span style="cursor: wait;">wait</span>
<span style="cursor: cell;">cell</span>
<span style="cursor: crosshair;">crosshair</span>
<span style="cursor: text;">text</span>
<span style="cursor: vertical-text;">vertical-text</span>
<span style="cursor: alias;">alias</span>
<span style="cursor: copy;">copy</span>
<span style="cursor: move;">move</span>
<span style="cursor: no-drop;">no-drop</span>
<span style="cursor: not-allowed;">not-allowed</span>
<span style="cursor: grab;">grab</span>
<span style="cursor: grabbing;">grabbing</span>
<span style="cursor:e-resize">e-resize</span>
<span style="cursor: n-resize;">n-resize</span>
<span style="cursor: ne-resize;">ne-resize</span>
<span style="cursor: nw-resize;">nw-resize</span>
<span style="cursor: s-resize;">s-resize</span>
<span style="cursor: se-resize;">se-resize</span>
<span style="cursor: sw-resize;">sw-resize</span>
<span style="cursor: w-resize;">w-resize</span>
<span style="cursor: ew-resize;">ew-resize</span>
<span style="cursor: ns-resize;">ns-resize</span>
<span style="cursor: nesw-resize;">nesw-resize</span>
<span style="cursor: nwse-resize;">nwse-resize</span>
<span style="cursor: col-resize;">col-resize</span>
<span style="cursor: row-resize;">row-resize</span>
<span style="cursor: all-scroll;">all-scroll</span>
<span style="cursor: zoom-in;">zoom-in</span>
<span style="cursor: zoom-out;">zoom-out</span>
</div>
</body>
</html>
Il est également possible d'avoir des curseurs entièrement personnalisés.
La propriété cursor gère une liste de valeurs de curseurs définis par l'utilisateur, séparés par des virgules, suivie du curseur générique. Si le premier curseur est spécifié de manière incorrecte ou est introuvable, le curseur suivant dans la liste séparée par des virgules sera utilisé, et ainsi de suite jusqu'à ce qu'un curseur utilisable soit trouvé.
Si aucun des curseurs définis par l'utilisateur n'est valide ou pris en charge par le navigateur, le curseur générique à la fin de la liste sera utilisé à la place.
Conseil : le format standard qui peut être utilisé pour les curseurs est le format .cur. Cependant, vous pouvez convertir des images telles que .jpg et .gif en format .cur en utilisant un outil de conversion d'images disponible gratuitement en ligne.
Pour créer un curseur personnalisé, tout d'abord, créez l'image du curseur et enregistrez-la avec l'extension .gif ou .png (pour Firefox, Chrome, Safari) et .cur (pour Internet Explorer). Ensuite, appliquez la propriété cursor avec une liste d'URLs séparées par des virgules pointant vers ces images de curseur. Enfin, terminez cette liste par un curseur générique tel que default, pointer, help, etc. comme indiqué dans l'exemple suivant.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Curseur CSS personnalisé</title>
<style>
a {
cursor: url("/examples/images/custom.gif"), url("/examples/images/custom.cur"), default;
}
</style>
</head>
<body>
<p>Placez le pointeur de votre souris <a href="#">ICI</a> pour faire apparaître le curseur personnalisé.</p>
</body>
</html>
Dans l'exemple ci-dessus, custom.gif et custom.cur sont les fichiers du curseur personnalisé, uploadés sur votre serveur, et default est le curseur générique qui sera utilisé si le curseur personnalisé est manquant, ou n'est pas supporté par le navigateur de l'utilisateur.
Attention : Si vous déclarez un curseur personnalisé, vous devez définir un curseur générique à la fin de la liste, sinon le curseur personnalisé ne sera pas rendu correctement.
Remarque : IE9 et les versions antérieures ne prennent en charge que les valeurs URL de type .cur pour le curseur statique, et .ani pour le curseur animé. Toutefois, les navigateurs tels que Firefox, Chrome et Safari prennent en charge les valeurs .cur, .png, .gif et .jpg, mais pas .ani.
