Contenu
- Curseurs de souris basiques
- Curseurs de souris personnalisés
- Changer le style du curseur avec Javascript en ligne
- Jouer avec les fonctions
Changer le curseur de la souris est un moyen simple d’ajouter des effets spéciaux à votre page Web. Cela peut améliorer la convivialité en fournissant aux utilisateurs des aides visuelles supplémentaires, en particulier sur des pages plus complexes telles que les jeux et les cartes interactives. Vous pouvez utiliser Javascript pour changer le style du curseur en fonction de la date, de la météo et de tout le reste. La technique d’utilisation de Javascript, HTML et CSS pour créer des pages Web dynamiques est appelée DHTML (Dynamic HTML).
Curseurs de souris basiques
Plusieurs curseurs de souris standard peuvent être utilisés en modifiant le style d'un élément ou le corps de la page. Les noms sont default, crosshair, hand, move, text, wait et help. Voir le lien "CSS Cursor Property" dans la section "Ressources" pour plus de détails à ce sujet. Utilisez CSS pour définir le curseur qui sera affiché lors du passage d’un élément comme suit:
Croix
Curseurs de souris personnalisés
En plus des curseurs de base, vous pouvez utiliser des modèles personnalisés en définissant l'adresse d'un fichier image comme style de curseur, comme dans l'exemple suivant:
Curseur personnalisé
Tous les navigateurs ne prennent pas en charge cette fonctionnalité ni tous les types de fichiers. Par exemple, Internet Explorer attend des fichiers avec les extensions ".cur" ou ".ani". Firefox n'accepte pas les curseurs animés (".ani") et attend un curseur de base au-delà de l'image. Pour de meilleurs résultats, indiquez un fichier de curseur (".cur" ou ".ani"), un fichier image (PNG, JPEG ou GIF) et un type de curseur de base en tant que sauvegarde. L'exemple suivant utilise un curseur animé comme premier choix, un fichier simple à la deuxième place et le curseur de base comme dernière option. Le navigateur essaiera toutes les options jusqu'à ce que vous en trouviez une que vous pouvez utiliser:
Curseur personnalisé
La bibliothèque Open Cursor dans la section Ressources propose des collections de curseurs de souris gratuits.
Changer le style du curseur avec Javascript en ligne
Vous pouvez changer le style CSS du curseur en utilisant Javascript. Il existe plusieurs attributs HTML liés aux actions de la souris qui peuvent être utilisés pour exécuter du code en cliquant, en déplaçant ou en survolant un élément de page. Quelques exemples sont:
onmouseover: le pointeur de la souris passe sur un élément. onmousedown: le bouton de la souris est enfoncé. onmouseup: le bouton de la souris est relâché. onmouseout: le pointeur de la souris quitte l'élément. ondblclick: l'utilisateur double-clique sur la souris.
Dans la section "Attributs" de la section "Attributs", vous trouverez plus d'attributs que vous pouvez utiliser pour ajouter des actions avec Javascript.
Ajoutez une action à un événement (par exemple, "survolez") en définissant le code que vous souhaitez exécuter comme valeur de l'attribut. Dans l'exemple ci-dessous, le curseur se changera en "aide" en survolant le lien.
L'aide
Jouer avec les fonctions
Parfois, vous voudrez faire plus d’un attribut. En écrivant toutes les actions dans une fonction Javascript, vous pouvez placer tout le code en haut de votre document HTML et l'appliquer à n'importe quel élément en appelant l'attribut event. Le code suivant change le curseur sur l'élément passé en paramètre "el":
fonction setElementCursor (el) {el.style.cursor = "url (3DArrow.cur), réticule" GO}
La fonction sera située dans la section script de l'en-tête du document (entre les balises
et ) ou dans un fichier de code externe référencé dans la même partie. Pour l'utiliser, appelez la fonction avec le mot-clé "this" à partir d'un attribut d'événement dans une balise HTML. La fonction recevra une référence à l'élément associé à l'événement de la souris et changera le style du curseur. Par exemple, si le pointeur ignore le texte suivant, le curseur change:Le curseur changera sur ce lien
Vous pouvez également modifier le curseur principal qui sera affiché lors du survol du bas de la page. La fonction suivante vous permettra de changer le curseur au type indiqué dans le paramètre "curtype":
function setMainCursor (curtype) {commutateur (curtype) {cas "chargement": document.body.style.cursor = "url (working.ani), url (working.png), attendez"; casse GO "interdit": document.body.style.cursor = "url (indisponible.ani), url (indisponible.png), valeur par défaut"; break GO cas "default": default: document.body.style.cursor = "url (arrow.cur), default" GO}}
Pour l'utiliser, appelez-le "chargement", "interdit" ou "par défaut" à partir d'un attribut d'événement dans une balise HTML. Par exemple, le bouton suivant changera le curseur en "chargement" lorsque vous cliquerez dessus:
Le langage Javascript a une fonctionnalité illimitée. Le code ci-dessous décomptera et chaque seconde changera le curseur de la souris en une image associée à la valeur actuelle. La fonction "setTimeOut" laissera la fonction suspendue pendant une seconde avant d'être rappelée et de mettre à jour le compteur.
fonction doCountdownCursor (count) {document.body.style.cursor = "url (" + count + ".ani), url (" + count + ".png) {setTimeout ("doCountdownCursor (" + count + ")", 1000) GO} else {document.body.style.cursor = "url (arrow.cur), par défaut" GO}}
Sur la page Web, utilisez la fonction pour afficher le nombre sur le curseur de la souris lorsque vous cliquez sur un bouton d'un formulaire.