Consulté 44,809 fois

La classe BODY et la police par défaut en CSS

Modification du pointeur ou du curseur en CSS - Avec Internet Explorer

Django (Oznog) Blais, Trucsweb (1er février 2001)

Vous pouvez modifier l’aspect du pointeur selon vos goûts. Ajouter un style et déterminer l’attribut « cursor » dans vos liens ou créer une feuille de style externe en déterminant des classes pour chaque pointeur.

* Flèche qui indique une direction, l’astérisque peut être : N, NE, NW, S, SE, SW, E, ou W. (Nord, nord-est, nord-ouest, sud, sud-est, sud-ouest, est ou ouest)

Le style peut être donné à la plupart des objets de votre feuille de style ou en ajoutant des classes:

Tous les paragraphes auront la main comme pointeur. 

<style> 
  P { cursor:hand } 
</style>

Création de la classe .aide

<style>
  .aide { cursor: help; }
</style>

Utilisation de la classe .aide
<a href="url" class="aide">Lien avec un point d’interrogation</a>

Ou directement dans le code :

Dans un script
<p onMouseOver="this.style.cursor=%27hand%27">

Dans le HTML
Avec une cellule de table (comme mon exemple)
<td style="cursor:hand;">Passer la souris sur ce texte</td>

Ou avec SPAN
<span style="cursor:crosshair;">Passer la souris sur ce texte</span>

Personnaliser votre curseur est très simple, le plus complexe est de réaliser un .ani ou .cur valide.

// Pour tout le document
<style>
BODY { cursor:url("curseur.cur"); }
</style>

// Curseur personalisé (.cur)
<div style="cursor:url(%27bottle.cur%27);">Curseur personalisé</div>

// Curseur personalisé animé (.ani)
<div style="cursor:url(%27coke.ani%27);">Curseur personalisé animé</div>

Pour créer vos curseurs je vous conseil les logiciels suivant :

• IconForge par CursorArts
• Comet Cursor Plus (Logiciel et curseurs gratuits)

Partager |

Dernière mise à jour : 2010-01-05