Comment intégrer un curseur personnalisé sur son site web ?

Lorsque vous naviguez sur un site web, le curseur de la souris est souvent le premier élément avec lequel vous interagissez. C'est pourquoi de nombreux créateurs cherchent à personnaliser cet élément pour renforcer l'identité visuelle de leur projet.

Que vous souhaitiez remplacer le curseur standard par une icône, une image ou un élément animé, il existe plusieurs techniques pour y parvenir. Nous vous présentons deux méthodes pour intégrer un curseur personnalisé sur votre site web.

Définition

• La propriété cursor CSS permet de définir la forme et le comportement du curseur de la souris lorsque celui-ci survole un élément d'une page web.
• Ils sont principalement utilisés pour améliorer l'expérience utilisateur en transmettant l'idée d'une certaine fonctionnalité.
• Il est important de noter que cette propriété ne s'applique qu'aux appareils qui utilisent une souris. Elle ne s'applique donc pas aux téléphones ou aux tablettes, car ils n'ont pas de curseur.

Valeurs de la propriété

• Cette propriété peut être définie avec différentes valeurs, ou types de curseurs CSS, tels que "auto", "pointer", "default", "move", et bien d'autres encore.
• Chaque valeur correspond à une forme et à un comportement différents du curseur.

Il existe plus de 30 types différents que vous pouvez utiliser. Voici une liste de tous les utilisateurs ainsi qu'une démo sur CodePen pour prévisualiser chaque type :

See the Pen The Cursors! by Chris Coyier (@chriscoyier) on CodePen.

Par exemple, imaginons que vous souhaitiez transformer le curseur en pointeur lorsque l'utilisateur survole un lien. Vous pouvez le faire en utilisant le code CSS suivant :

• Ce code définit la propriété du curseur du lien à « pointeur » lorsque l'utilisateur le survole. Cela indique à l'utilisateur que le lien est cliquable et l'encourage à cliquer dessus.

Personnaliser le curseur

Ces types de curseurs CSS peuvent être également personnalisés à l'aide d'autres propriétés CSS pour créer des effets uniques sur un site web :

See the Pen Cursors by Marko (@denic) on CodePen.

Avec l'aide de la valeur "url", les concepteurs peuvent définir une image personnalisée sur la propriété. Par exemple :

• Ce code attribue à la propriété curseur une image personnalisée appelée 'my-cursor.png'. La valeur "auto" indique que si l'image ne se charge pas, le navigateur doit revenir au curseur par défaut.

La méthode la plus simple pour personnaliser le curseur de votre site web est d'utiliser les propriétés CSS 'cursor'. Voici les étapes à suivre pour intégrer un curseur personnalisé avec CSS :

Étape 1 : Choisir son curseur

• Choisir le type de curseur personnalisé
  Vous pouvez opter pour une icône, une image, un élément animé, etc. Assurez-vous que le format de fichier soit compatible (généralement .png, .svg ou .cur).
• Créer ou obtenir le fichier du curseur personnalisé
  Si vous n'avez pas de compétences en design, vous pouvez trouver des curseurs gratuits ou payants sur des sites web dédiés.
• Préparer le fichier du curseur
  Vérifiez que l'image a la bonne taille (généralement 32x32 pixels) et que le point de clic (hotspot) est bien positionné.

Étape 2 : Intégrer le curseur

• Intégrer le curseur personnalisé avec CSS
  Ajoutez le code CSS suivant à votre feuille de style :

• Remplacez 'chemin/vers/votre-curseur.png' par le chemin d'accès à votre fichier image.
• Appliquer la classe CSS
  Appliquez cette classe CSS à l'élément ou la section souhaitée dans votre code HTML :

• Enregistrez vos modifications et actualisez votre site web.
  Votre curseur personnalisé devrait désormais s'afficher.

Étape 3 : Rajouter un curseur alternatif

Juste au cas où l'image ne se chargerait pas ou ne pourrait pas être trouvée en raison de problèmes internes, rajoutez une autre url en mesure de sécurité.

Je suis sûr que vous ne voudriez pas que votre site web soit « sans curseur », c'est pourquoi il est très important d'ajouter une solution de repli. Vous pouvez également ajouter autant d'URL de backup que vous le souhaitez.

Dans l'exemple ci-dessous, la valeur suivante de la propriété est une valeur de repli :

Si vous souhaitez pousser encore plus loin votre personnalisation, vous avez également la possibilité de personnaliser le curseur sur un élément ou une section spécifique de votre page web.

Comme nous l'avons mentionné précédemment, il vous suffit d'inclure la classe CSS du curseur dans votre code pour appliquer votre curseur personnalisé sur l'intégralité de la page.

Donc, si vous souhaitez appliquer différents curseurs sur une même page, il vous suffit d'ajouter cette classe CSS à l'élément ou à la section souhaitée dans votre code HTML :

• Intégrer les curseurs personnalisés avec CSS
  Ajoutez le code CSS suivant à votre feuille de style en veillant bien à modifer le chemin par celui de votre fichier image :

• Appliquer la classe CSS
  Appliquez cette classe CSS à l'élément ou la section souhaitée dans votre code HTML :

• Enregistrez vos modifications et actualisez votre site web.
  Votre curseur personnalisé devrait désormais s'afficher.

Une autre méthode consiste à utiliser JavaScript pour remplacer dynamiquement le curseur standard par votre curseur personnalisé.

Voici les étapes à suivre pour intégrer un curseur personnalisé avec JavaScript :

• Construire le code HTML
  Commencez par créer une balise <div> dans votre HTML qui contiendra votre curseur personnalisé :

Vous remarquerez dans cet exemple nous avons utilisés l'attribut 'id', mais vous pouvez tout à fait utilisez l'attribut 'classe', tout dépends de votre projet.

• Construire le style CSS
  Ajoutez quelques styles CSS pour positionner et afficher correctement le curseur personnalisé :

• Ajouter le code JavaScript
  Enfin, ajoutez le code JavaScript suivant à votre fichier :

Ce code va récupérer la position de la souris à chaque mouvement et positionner le curseur personnalisé en conséquence.

• Enregistrez vos modifications et actualisez votre site web.
  Et voilà ! Votre curseur personnalisé devrait désormais s'afficher sur votre site web.

Tous les navigateurs modernes savent comment prendre en charge un curseur CSS personnalisé.

Si un utilisateur utilise un navigateur plus ancien, la mention « auto » à la fin de la syntaxe lui permettra de voir le curseur par défaut de ce navigateur.

Navigateurs compatibles avec la propriété CSS Cursor :

• Apple Safari 1.2 et versions ultérieures
• Firefox (toutes les versions)
• Google Chrome (toutes les versions)
• Internet Explorer 4.0 et versions ultérieures
• Opera 7 et versions ultérieures