Décoration des liens

Fiche coloration des liens
Fiche coloration des liens

Fiche - PC Astuces - Exemple de coloration et décoration des liens selon leur statut.

Dynamisez les liens de votre site


Avec les nouveaux navigateurs supportant le langage CSS (à partir de la version 4 d'Internet Explorer et Netscape), il est désormais possible de changer l'apparence de vos liens.
Ainsi vous pourrez les faire changer de couleurs lors du passage du curseur sur le lien, ou encore de faire apparaître ou disparaître le soulignement de ceux-ci à votre guise.
Pour cela , vous devez utiliser les feuilles de style. Dans les pages où vous souhaitez appliquer cet effet sur vos liens, insérez la syntaxe suivante dans l'entête du code source (entre les tags <head> et </head>):

Ou mettre cette syntaxe dans vos fichiers CSS liés à vos pages ainsi toutes vos pages auront le même style, mais vous pourrez toujours si besoin mettre dans le head d'une page les couleurs qui conviendraient mieux.

a:link {
text-decoration: none;
color: #0000FF;
font-family: Arial,Helvetica;
font-size: 8pt;
}
a:visited {
text-decoration: none; color: #0000FF;
font-family: Arial, Helvetica;
font-size: 8pt;
}
a:active {
text-decoration: none;
color: #FF0000;
font-family: Arial, Helvetica;
font-size: 8pt;
}
a:hover {
text-decoration: underline;
color: #FF0000;
font-size: 8pt;
}

  • Personnalisez ce script:
    Ce script comporte toutes les propriétés des liens de votre page, il vous est donc possible de les personnaliser selon vos souhaits.
    1. La partie A:link contient les propriétés de vos liens par défaut (l'équivalent de la commande LINK en HTML), c'est-à-dire au chargement de votre page. Dans l'exemple ci-dessus, les liens sont définis comme non soulignés (text-decoration: none), apparaissant en bleu (color: #0000FF), avec une police prédéfinie (font-family: Arial, Helvetica) et une taille également prédéfinie (font-size: 8pt).
    2. La partie A:visited définie l'affichage des liens qui ont déjà été visité (l'équivalent de VLINK en HTML). Elle comporte les mêmes attributs que la partie A:link.
    3. La partie A:active définie l'affichage des liens actifs (l'équivalent de ALINK en HTML). Elle comporte les mêmes attributs que la partie A:link.
    4. La partie A:hover définie l'affichage du lien lorsque vous placez le curseur de la souris dessus. Dans l'exemple ci-dessus, les liens sont définis comme soulignés (text-decoration: underline), apparaissant en rouge (color: #FF0000) et une taille prédéfinie (font-size: 8pt).

  • Remarques:
    Sous Internet Explorer (version 4 et 5), ce script fonctionne parfaitement.
    Sous Netscape Communicator, si la partie A:link est reconnue, ce n'est pas le cas de la partie A:hover.




14/11/2007
0 Poster un commentaire

A découvrir aussi


⨯

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 142 autres membres