Anciennement, on utilisait l’attribut border à l’intérieur de l’image (ex: border="1"), et le simple fait de mettre un lien sur cette image nous permettait d’avoir une bordure qui se comportait comme les liens de la page, avec les même couleurs. Toutefois, cette pratique est désuète et n’est pas compatible avec les nouveaux standards strict de HTML 4.0 ou XHTML 1.0, si vous voulez que vos pages soient valides. Comment réaliser la même chose en CSS?
Nous allons commencer par attribuer une class imageBordure au lien de notre image pour ensuite définir son aspect dans un fichier CSS externe. Ainsi, nous n’aurons qu’à donner le nom de cette class pour chaque lien des images qui devraient avoir une bordure:
En premier lieu, assurons-nous que le background soit réellement transparent pour nos liens sous cette class lorsque le curseur se trouve au-dessus:
a.imageBordure:hover {
background: transparent;
}
Ensuite nous allons définir la bordure des images qui suivent le lien que nous avons défini. Les CSS nous fournissent plus de flexibilité pour le contrôle de l’apparence des bordures autour des images que la méthode ancienne utilisant un attribut border dans l’image elle-même. Dans ce cas, nous allons ajouter un peu d’espace entre la bordure et l’image afin d’avoir un petit effet de cadre avec un padding de 2px. La bordure est aussi d’une épaisseur de 2px.
a.imageBordure img {
border: 2px solid green;
padding: 2px;
}
Maintenant on peut choisir la couleur des images qui ont été visitées.
a.imageBordure:visited img {
border: 2px solid black;
}
Et enfin, la couleur de la bordure lorsqu’elle est activée par un clic, ou lorsque le curseur de la souris est au-dessus:
a.imageBordure:hover img,
a.imageBordure:active img {
border: 2px solid white;
}