Comment utiliser un curseur personnalisé sur votre site Web

Qu’est-ce qu’un curseur personnalisé ?

Un curseur personnalisé est une modification intentionnelle de l’icône par défaut qui clignote pour vous indiquer où pointe votre souris ou l’endroit où vous vous préparez à saisir du texte. Au lieu d’une ligne clignotante ennuyeuse, vous pouvez ajouter de la couleur, des animations au survol ou des effets de clic. Sur un ordinateur, vous pouvez modifier le curseur par défaut dans les paramètres. Pour une page Web, vous devrez recourir à un peu de HTML, CSS et JavaScript. Ne vous laissez pas intimider.

Quel est l’objectif d’un curseur personnalisé ?

Un curseur personnalisé rend votre site Web unique. Des curseurs personnalisés guident vos visiteurs dans leurs interactions avec la page Web avec des flèches, des messages d’aide, des guides, des barres de progression, etc. Un curseur personnalisé remplace le curseur par défaut utilisé par le navigateur de votre visiteur pour rendre la page plus intéressante et aider les utilisateurs à comprendre ce qui se passera s’ils cliquent sur un lien ou font glisser un objet.

Oui. Un curseur personnalisé est sûr. Cependant, ce n’est pas parce qu’un curseur CSS est sûr qu’un visiteur sur votre site le saura. Un excès de créativité risque de faire hésiter l’utilisateur.

Par exemple, si vous utilisez trop d’animations ou d’éléments qui clignotent lorsqu’un visiteur déplace sa souris, ce dernier peut penser que quelque chose ne va pas. N’oubliez pas que l’objectif d’un curseur personnalisé est de guider votre utilisateur et de communiquer avec lui. Si les analyses Web montrent que des clients ferment fréquemment votre site Web après l’ajout d’une personnalisation, envisagez de supprimer certains de ces changements.

Bien que les curseurs personnalisés soient sûrs, vous devez vous montrer très prudent lorsque vous téléchargez des curseurs à partir de divers sites. En général, il n’est jamais sûr de télécharger du code ou des fichiers à partir de sites Web que vous ne connaissez pas. Avant de télécharger un curseur personnalisé à partir d’un site Web proposant des téléchargements gratuits, faites des recherches pour vous assurer que cette page a une solide réputation. Mieux encore, lisez la suite pour voir comment créer vous-même un curseur CSS qui répondra à vos besoins. Ce ne sont que quelques lignes de code que vous pouvez rédiger même si vous êtes totalement novice.

Comment personnaliser le curseur sur mon site Web ?

Il existe deux façons principales de créer un curseur de souris personnalisé. Vous pouvez utiliser CSS ou JavaScript. Avant d’ajouter CSS ou JavaScript, vous devrez accéder au script CSS que vous souhaitez modifier. Si vous utilisez le créateur de page Web de MailChimp, accédez au volet Add and Edit Web Page Sections (Ajouter et modifier des sections de page Web) dans le créateur de page Web de MailChimp.

Ne vous laissez pas intimider. La modification est simple. Voici comment faire :

1. Dans le tableau de bord de votre site Web, cliquez sur Edit Site (Modifier le site).
2. Passez la souris sur la page sur laquelle vous souhaitez travailler et cliquez sur Edit Page (Modifier la page).
3. Dans le créateur de site Mailchimp, cliquez sur le volet Sections (Sections). Le volet s’agrandira pour vous montrer les sections de votre page Web.
4. Passez la souris sur n’importe quelle section du volet pour afficher cette zone de la page.
5. Cliquez sur la section dans laquelle vous souhaitez personnaliser votre curseur pour voir les options de style.
6. Cliquez sur Edit (Modifier) pour ouvrir la section et apporter vos modifications au code CSS.

Comment créer un curseur personnalisé avec CSS

CSS possède une propriété permettant de personnaliser les curseurs. Vous pouvez utiliser la propriété de curseur dans la section du corps du CSS pour rendre le pointeur de votre souris plus intéressant. Vous aurez besoin d’une image au format PNG, JPEG ou SVG. Utilisez ensuite l’extrait de code suivant dans le CSS de la section que vous souhaitez personnaliser pour transformer le pointeur en une illustration graphique de votre choix :

body { cursor: url(‘YourCursorImage.png’), auto; }

La propriété de curseur vous permet de spécifier quel curseur, parmi plusieurs, apparaîtra. Le paramètre par défaut « auto » devrait apparaître en dernier dans la liste. De la sorte, le navigateur de l’utilisateur affichera son curseur par défaut si rien d’autre ne fonctionne.

Un tableau répertoriant certaines des options disponibles avec CSS est présenté ci-dessous. Utilisez la syntaxe  suivante :

cursor: value, auto;

Par exemple, si vous voulez que le curseur de la souris se présente sous la forme d’un cercle bleu indiquant à l’utilisateur d’attendre, utilisez l’instruction ci-dessous. L’ajout de la mention « auto » à la fin de l’instruction fournit au navigateur une option de repli s’il ne sait pas interpréter cette valeur particulière.

cursor: progress, auto;

Ce ne sont là que quelques exemples des centaines de valeurs que vous pouvez utiliser avec la propriété CSS Cursor. Pour une liste plus complète, consultez la page pour développeur de Mozilla.

Personnaliser la couleur est également un bon moyen de rendre votre curseur CSS intéressant, surtout si vous faites correspondre les couleurs aux directives de votre marque. Vous pouvez modifier la couleur ou la taille dans le script CSS. Veillez simplement à ne pas rendre le pointeur de votre souris trop grand ou difficile à voir par rapport à l’arrière-plan de votre page Web.

Comment créer un curseur personnalisé avec JavaScript

Vous devez modifier le DOM (Document Object Model) pour personnaliser le curseur dans JavaScript. La première étape consiste à créer une division dans le code HTML :

<div class="cursor pointed"></div>

une fois que vous avez défini la section div, vous pouvez utiliser les instructions JavaScript pour que votre curseur personnalisé agisse comme vous le souhaitez lors d’un événement de déplacement de la souris. (C’est juste une façon compliquée de dire quand l’utilisateur déplace la souris ou clique quelque part sur votre page Web.) Vous aurez besoin de CSS pour masquer le curseur par défaut et pour définir les coordonnées X et Y. Voici un exemple de la syntaxe dont vous aurez besoin.

body{ background-color: #1E1C44; cursor: none; }

.pointed{ width: 12px; height: 12px; background-color: red; border-radius: 25%; }

window.addEventListener(’mousemove’, moveCursor)

Remarque : utilisez la valeur « aucun » pour la propriété du curseur pour masquer le curseur par défaut et afficher le vôtre à la place. L’écouteur d’événement répondra chaque fois qu’un visiteur de votre site Web déplacera le curseur de la souris.

Curseur personnalisé pour Chrome

Chrome est le navigateur Web le plus populaire. Nous allons donc commencer par les plug-ins de curseurs personnalisés de Chrome. Il existe une centaine d’options gratuites, dont Minecraft, des sabres laser et des personnages de dessins animés.

Si vous le souhaitez, vous pouvez même utiliser votre propre image comme curseur du moment qu’elle respecte les directives en matière de taille. Idéalement, utilisez une illustration graphique de 16 x 16 ou 32 x 32 pixels. Vous pouvez utiliser des images d’une taille pouvant atteindre 128 x 128, mais essayez d’abord des tailles plus petites. Pour un affichage optimal, Chrome recommande une image avec un arrière-plan transparent. (Si l’arrière-plan n’est pas transparent, il masquera une partie de votre site Web.) L’extension est disponible gratuitement dans le Chrome Web Store de Google. Après avoir installé l’extension, vous devrez actualiser votre page Web.

Quelques limitations importantes s’appliquent au curseur personnalisé pour Chrome. Tout d’abord, il ne fonctionnera pas sur la plupart des pages du magasin. Deuxièmement, il est limité à la navigation avec Chrome. L’extension Chrome n’est donc pas idéale pour les concepteurs Web, mais c’est un moyen rapide et facile de voir à quoi ressembleront les différents pointeurs de souris sur votre site Web.

Quels sont les navigateurs qui prennent en charge les curseurs CSS et les curseurs de souris personnalisés ?

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

Aider un site Web à se démarquer grâce à un curseur personnalisé. La personnalisation du curseur n’est que l’une des nombreuses façons de rendre votre page Web plus interactive et intéressante. En rendant votre site Web convivial et intuitif, vous attirerez et garderez les visiteurs. N’ayez pas peur d’expérimenter et laissez votre créativité s’exprimer !