Membre de ClickFR, Reseau francophone Paie-Par-Click
Accueil
Accueil
- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]
Accueil

CSS 2
L'interface

  Modification de la forme du pointeur

fonction  principe  la methode elle-meme  demonstration  telechargement de la methode

  Fonction
On a l'habitude d'un curseur en forme de flêche, en forme de 'point d'insertion de texte', en forme de 'main' suivant que l'on passe respectivement sur un fond ou une image, sur un texte ou enfin sur un lien, mais que diriez-vous de bousculer un peu tout ça ?
Internet Explorer à partir des versions 5 et Netscape à partir de la version 6 permettent de transformer le curseur à volonté.
  Principe
Il suffit de spécifier pour l'attribut 'cursor:' une valeur qui sera au choix parmi le tableau suivant :
Valeur de l'attribut Rendu du curseur* Compatibilité
all-scroll IE 6+
auto Laisse le navigateur choisir
en fonction du contexte		 IE 5+ / NC 6+
col-resize IE 6+
crosshair IE 5+ / NC 6+
default IE 5+ / NC 6+
hand IE 5+
help IE 5+ / NC 6+
move IE 5+ / NC 6+
no-drop IE 6+
not-allowed IE 6+
pointer IE 6+ / NC 6+
progress IE 6+
row-resize IE 6+
text IE 5+ / NC 6+
url('mr_java.cur')** IE 6+
vertical-text IE 6+
wait IE 5+ / NC 6+
SE-resize*** IE 5+ / NC 6+
* Les images présentées ici sont représentatives d'Internet Explorer sur PC, apparence standard, elles peuvent différer légèrement suivant le système et le navigateur.
** Certains hébergements n'accèptent pas les '.ani' et les '.cur' (formats des pointeurs).
*** Il existe 8 variante de cette valeur : N, NE, E, SE, S, SW, W, NW représentant les 8 directions d'une boussole.

Vous pouvez indiquer ces styles localement, pour un besoin ponctuel comme dans le premier exemple ou si vous comptez l'utiliser plus souvent, créez une feuille de style pour chaque 'curseur', comme dans le second exemple.
  La méthode
Exemple 1 : application locale
dans la partie <body>
<a href="plans.html" style="cursor: crosshair;">Mes plans d'architecture</a><br>
<a href="explications.html" style="cursor: help;">Un peu d'aide ?</a><br>
<a href="virages.html" style="cursor: move;">Attention ça va remuer...</a><br>
<a href="resume.html" style="cursor: text;">Ceci est-il un lien ?</a><br>

Exemple 2 : application multiple
dans la partie <head>
<style>
.archi { cursor: crosshair; }
.aide { cursor: help; }
.moving { cursor: move; }
.insertion { cursor: text; }
</style>
dans la partie <body>
<a href="plans.html" class="archi">Mes plans d'architecture</a><br>
<a href="explications.html" class="aide">Un peu d'aide ?</a><br>
<a href="virages.html" class="moving">Attention ça va remuer...</a><br>
<a href="resume.html" class="insertion">Ceci est-il un lien ?</a><br>
  Démonstration
Mes plans d'architecture
Un peu d'aide ?
Attention ça va remuer...
Ceci est-il un lien ?
  Téléchargement
Cette feuille de style est disponible en deux versions :
  • le style est appliqué localement, dans la balise style de la page),
  • le style dans une feuille de style externe, commune à toutes les pages (fichier .css).

    L'intérêt d'une feuille de style est de pouvoir partager le style entre plusieurs liens de la page.
    		•
    Style local :
    int_pointeur.zip
    1 Ko    		 telechargez le style telechargez le style
    Feuille de style :
    int_pointeur2.zip
    1 Ko
    Recherche
    		aide sur la recherche
    DHTML
    HTML 4
    Javascript 1.3
    Références
    Aide générale
    hit-parade
    Votez TOP Ouaibe !

    statistiques
    aide sur les contacts aide sur la mailing-list aide sur la newsletter