Changer la couleur et autres caractéristiques des liens au survol de la souris

Vous avez toujours cherché à rendre vos pages web toujours plus attractives par divers moyens (images, couleurs, gifs animés...) ? L'un des moyen efficace et qui reste cependant relativement discret est d'employer les styles CSS pour rendre vos liens hypertextes encore plus vivants. Vous allez donc apprendre avec ce qui suit à modifier la couleur des liens au survol de la souris, leur(s) état(s) (surligné, souligné), leur(s) police(s) de caractères (verdana, courrier, arial...), leur(s) taille(s) et leur(s) autre(s) caractéristique(s) (gras, italique...).

- Comment faire ?

Voici le morceau de code HTML à insérer dans vos pages web entre les balises <HEAD></HEAD> :

A:link { COLOR: #000000; FONT-FAMILY: Verdana, Helvetica; FONT-SIZE: 8pt; TEXT-DECORATION: none }
A:visited { COLOR: #000000; FONT-FAMILY: Verdana, Helvetica; FONT-SIZE: 8pt; TEXT-DECORATION: none }
A:active { COLOR: #000000; FONT-FAMILY: Verdana, Helvetica; FONT-SIZE: 8pt; TEXT-DECORATION: none }
A:hover { COLOR: #c8373a; FONT-SIZE: 8pt; TEXT-DECORATION: none }

Par exemple ce morceau de code déclare les liens de couleur noire lorsqu'ils sont au " repos " et rouge lorsqu'ils sont survolés. Leur police de caractère reste la même tout le temps (Verdana, Helvetica) ainsi que leur taille (8 pt = taille 1).

De même pour les liens actifs et les liens précédemment visités !

- Explications détaillées

A : Il designe la classe du lien. Dans cet exemple c'est la classe par défaut (<a></a>).
link : Il designe les liens qui n'ont pas encore été visités.
active : Cet attribut désigne le lien lorsqu'il est cliqué.
visited : Celui-ci désigne les liens précédemment visités.
hover : Le hover designe les liens lorsqu'il sont survolés.

COLOR:#000000; L'attribut COLOR affecte une couleur que vous lui avez spécifiée (ici #000000 = Noir) au type de liens spécifié précédemment (link - active - visited - hover). Attention pour éviter toute erreur de fonctionnement, n'oubliez pas de mettre le dièse (#) devant chaque code hexadécimal.

FONT-FAMILY:Verdana, Helvetica; Ce morceau de code HTML va assigner une police de caractères au type de lien précédemment spécifié. Dans notre exemple c'est le Verdana Helvetica mais vous pourrez très bien utilisez la police qui vous plait le plus. Prenez tout de même garde à ne pas prendre des polices de caractères personnalisées ou quasiment illisibles voire indéchiffrables afin que vos visiteurs puissent facilement trouver ce qu'ils cherchent ou pour qu'ils lisent facilement.

FONT-SIZE:8pt; L'attribut Font-size affecte une taille de police au type de liens spécifiés. Dans cette exemple c'est du 8pt (point), ce qui correspond à la taille 1. Le 10pt correspond à la taille 2... Comme précédemment, évitez les tailles énormes ou trop petites ! Essayez de gérer en fonction des polices de caractères que vous avez affectées aux liens...

TEXT-DECORATION:none C'est sans doute l'une des parties les plus interressantes puisqu'elle permet d'affecter un état à vos liens. C'est à dire que cet attribut s'occupera de changer le lien lorsqu'il sera survolé par exemple. Vous pouvez lui affecter plusieurs états :

none : Il indique qu'il n'y aura rien sur le lien. Il restera normal. (exemple ci-contre avec les liens du menu de ce site qui changent seulement de couleur au survol).
underline : Le lien sera donc souligné avec la couleur que vous lui aurez affectée.
overline : Le lien sera grâce à cet effet surligné également avec la couleur que vous lui aurez attribuée.
overline underline : Le lien sera à la fois souligné et surligné toujours avec la couleur qui lui a été assignée.
line-through : Le lien sera barré au milieu avec la couleur qui lui aura été affectée dans le code.

- Liens en gras et italique ?

Pour rendre vos liens en gras, insérez ce petit morceau de code HTML dans le code du début (et dans une ligne située entre accolades) après un point virgule afin qu'il n'y ai pas d'erreurs à l'affichage :

FONT-WEIGHT:bold

Enfin pour que vos liens soient en italique, ajoutez ce code de la même façon que le précédent dans le code du début dans une ligne située entre accolades :

FONT-WEIGHT:italic

Voila en ce qui concerne les liens et les effets que vous pouvez leur attribuer ! En espérant que cet article vous aura surpris, aidé, étonné, interressé... Je suis ouvert à toutes vos remarques, alors n'hésitez pas également à le commenter puisque c'est le premier que je fais sur FRANCE-JEUNE. Sinon je vous donne rendez-vous avec d'autres articles qui je l'espèrent vous épateront tout autant !

-----------------------------------------------------------------

Voici l'adresse de mon site actuellement en restructuration : Webmaster-Debutant.com
Et mon mail : [email protected]

Article(s) déjà réalisé(s) : Changer les Couleurs de la Barre de Scroll !

Changer la couleur et autres caractéristiques des liens au survol de la souris

Vous vous êtes toujours demandés comment les liens pouvaient changer lorsqu'on les survole avec la souris ? Vous cherchez à le faire pour les liens de votre site ? Rien de plus simple ! Il suffit de suivre ce qui suit et de l'adapter à votre site ! Alors suivez le guide...