- · Niveau : DÉBUTANT
- · Compatibilité : Internet Explorer
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.
Auto | Passer la souris sur ce texte |
Crosshair | Passer la souris sur ce texte |
Default | Passer la souris sur ce texte |
Hand | Passer la souris sur ce texte |
Move | Passer la souris sur ce texte |
*-resize | Passer la souris sur ce texte |
Text | Passer la souris sur ce texte |
Wait | Passer la souris sur ce texte |
Help | Passer la souris sur ce texte |
Personalisé | Passer la souris sur ce texte |
Perso animé | Passer la souris sur ce texte |
* 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 :