HTML et CSS divers / Autres langages / Tutoriels / Archives

Changer le curseur de la souris

Je ne vais évidemment pas parler du changement permanent du curseur de souris tel que vous pouvez le faire via le panneau de configuration de votre Windows ou de tout autre OS, mais d'un effet de changement de curseur au survol d'un lien ou d'un élément HTML...

Déjà, sachez que cela se fait en pure CSS, et pas avec du JavaScript, c'est une idée reçue qui a la vie dure... Et cette solution est compatible avec la quasi-totalité des navigateurs, ce qui est mieux...

Les différents états que peuvent prendre le curseur de la souris sont default / pointeur par défaut, help / aide, text / point d'insertion de texte, wait / sablier, move / déplacement et crosshair / cible.
Ensuite, soit vous définissez un style sur un élément, soit vous définissez proprement des classes dans votre feuille de style.

Exemple de style à la volée :

<a href="#" style="cursor: help;">Changer de curseur pour l'aide</a><br />

Et son rendu :

Changer de curseur pour l'aide

Ci-après une feuille de style "propre" avec des classes :

.curs_def {
  cursor: default;
}
.curs_aide {
  cursor: help;
}
.curs_txt {
  cursor: text;
}
.curs_attente {
  cursor: wait;
}
.curs_bouge {
  cursor: move;
}
.curs_cible {
  cursor: crosshair;
}

Et des exemples pour chaque cas :

<a href="#" class="curs_def">Curseur par défaut</a><br />
<a href="#" class="curs_aide">Curseur d'aide</a><br />
<a href="#" class="curs_txt">Curseur insertion de texte</a><br />
<a href="#" class="curs_attente">Curseur sablier</a><br />
<a href="#" class="curs_bouge">Curseur de déplacement</a><br />
<a href="#" class="curs_cible">Curseur cible</a><br />

Et le rendu (survolez les liens) :

Curseur par défaut Curseur d'aide Curseur insertion de texte Curseur sablier Curseur de déplacement Curseur cible

Info-bulle

On appelle communément info-bulle la petite vignette contextuelle qui affiche un bout de texte lorsque on survole avec la souris un élément comme une image, un lien, un bouton... Il est tout à fait possible de faire la même chose en HTML, via les attributs alt et title, qui s'appliquent respectivement aux images et aux liens.

/* ALT, texte alternatif pour une image */
<img src="{source de l'image}" alt="Ceci est le texte alternatif de l'image." [class="{classe(s) CSS}"] />

Attention, si le texte alternatif s'affiche complètement si l'image n'est pas encore chargée dans le navigateur, il se peut par contre qu'il soit coupé lors de l'affiche de l'info-bulle, certains navigateurs/OS n'adaptant pas la largeur/hauteur de la bulle en fonction de son contenu... Soyez synthétique et appropriez le contenu du ALT à l'utilité réelle de l'image.

À noter aussi que dans la normalisation XHTML, la présence de l'attribut ALT est obligatoire, même si il peut être vide.

/* TITLE, étiquette de texte complémentaire à un lien */
<a href="{cible du lien}" title="Information contextuelle sur le contenu du lien" [class="{classe(s) CSS}"]>{texte ou éléments HTML pour matérialiser le lien}</a>

Même remarque au sujet de la longueur du texte...

À noter aussi que certains navigateurs n'affiche pas les ALT des images correctement chargées si celles-ci se trouvent encadrées par des balises de lien, il faut donc cumuler le TITLE sur le lien et le ALT de l'image pour que quelque chose s'affiche :

/* Cumul des attributs TITLE et ALT sur un lien/image... */
<a href="{cible du lien}" title="TITLE sur le lien" [...]><img src="{source de l'image}" alt="ALT sur l'image." [...] /></a>

Selon le navigateur utilisé, vous aurez soit "TITLE sur le lien", soit "ALT sur l'image" qui apparaîtra dans l'info-bulle... Au pire, mettez la même chose ;-)

Enfin, sachez que si la mise en place des ALT et TITLE vous paraît long, fastidieux et inutile, sachez que c'est faux : les moteurs de recherche sont friands de ces informations contextuelles, cela pourra peut-être vous faire gagner quelques places dans leurs classements, ce qui n'est pas négligeable.

Exemples :

<img src="contents/images/ikons/item.gif" alt="ALT Texte alternatif" /><br />
<a href="?section=4&menu=15&niveau=1" title="TITLE Section HTML et CSS des tutoriels de Killeak.net">&gt;&gt; HTML et CSS divers</a><br />
<a href="mailto:webmestre(a)killeak(.)net" title="TITLE écrire au webmestre de Killeak.net"><img src="contents/images/ikons/mail_add.gif" alt="ALT écrire au webmestre de Killeak.net" /></a><br />

>> HTML et CSS divers

Dégradé de couleur en CSS

/* Dégradé de couleur, pour cellules ou corps de tableau */
.splitter {
  filter: Alpha( Opacity=100, FinishOpacity=1, Style=1, StartX=0, StartY=6, FinishX=85, FinishY=6 );
  background-color: #000000;
}

À savoir :

Opacity : pourcentage d'opacité de départ de la background-color.
FinishOpacity : pourcentage d'opacité de fin de la couleur de fond.
Style : 1 dégradé linéaire, 0 dégradé oval.
Compatibilité :
Navigateurs IE 5.5 et +, Netscape 6 et +. Non testé avec Firefox, Mozilla, Safari, Konqueror et autres.
N'a pas été testé dans une balise <div>.
Ce code ne marche pas toujours s'il est inséré entre les balises <style type="text/css"> ... </style> directement dans le fichier HTML ; il faut mieux l'inclure dans une feuille de style séparée.
C'est un peu plus pratique qu'une image de fond, car ca s'ajuste tout seul à la largeur de l'élément qui utilise cette classe...

Voir aussi :
Archives : Articles : webdesign : >> Internet & les couleurs