Trucsweb.com

Trucsweb 1997-2017 - 20 ans de partage.

CSS

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

RDFFav

Modification du pointeur ou du curseur en CSS - Avec 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.css feuilles style classe cursor curseur pointeur main help wait sablié auto crosshair default hand move -resize text wait help

  • · 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.

ValeurExemple
AutoPasser la souris sur ce texte
CrosshairPasser la souris sur ce texte
DefaultPasser la souris sur ce texte
HandPasser la souris sur ce texte
MovePasser la souris sur ce texte
*-resizePasser la souris sur ce texte
TextPasser la souris sur ce texte
WaitPasser la souris sur ce texte
HelpPasser 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 :

Django (Oznog) Blais
Dernière mise à jour :

Commentaires

       Visites : 9475 - Pages vues : 57059
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@