Vous désirez afficher (ou changer) une bordure de couleur lorsque l'utilisateur survole une image-lien, une vignette par exemple.
Voici un comportement qui semble simple à première vue, mais qui demande un certain nombre de précautions pour fonctionner correctement sur tous les navigateurs.
Premier essai
L'image choisie pour cette petite expérience est un avatar de 100px par 100px :
Elle servira de vignette : lorsque le visiteur la survolera pour agrandir l'image, elle doit s'entourer d'une bordure bleue.
Je commence à supprimer les bordures bleues par défaut de l'image-lien :
a img {
border: 0 none;
}
Ensuite, j'applique une bordure sur le comportement :hover, elle sera de 2 pixels, solide et bleue :
a:hover {
border: 2px solid blue;
}
Cette manipulation semble suffisante, mais le résultat est assez surprenant :
Résultat sur Internet Explorer :
Résultat sur Internet Mozilla/Geckos :
Voir le résultat sur votre navigateur
Adaptations
Les problèmes d'affichage rencontrés nous rappellent à l'ordre : la balise <a> est un élément en-ligne qui n'est pas prévu pour posséder des dimensions.
La bordure entoure par conséquent un élement sans dimension et il est logique que cela provoque quelques soucis.
Voyons ce qu'il se passe en transformant notre balise <a> en élément bloc :
a {
display: block;
}
Résultat sur les deux navigateurs :
Voir le résultat sur votre navigateur
A noter que le résultat est le même en ajoutant la propriété "width: auto" à notre balise devenue bloc.
Une solution serait évidemment de donner à la balise <a> les mêmes dimensions que l'image vignette, mais cela risque d'être répétitif et ennuyeux dans le cas de multiples vignettes de tailles différentes.
Une solution au problème
Notre balise <a> doit se comporter en bloc... mais sans utiliser toute la largeur disponible de son conteneur.
Cela est possible en utilisant les propriétés "float" ou "position", car en les positionnant, ces propriétés transforment automatiquement les balises en-ligne en balises bloc.
En positionnant la balise en "absolu", la bordure entoure correctement l'image :
a {
position: absolute;
}
Le résultat est comparable avec un positionnement flottant :
a {
float: left;
}
Cependant, il reste quelques petits soucis d'affichage :
- L'image est décallée de quelques pixel lors du survol
- Mozilla laisse un espace blanc sous l'image
Le premier souci est réglé en donnant au lien une bordure au repos, de la même taille que la bordure au survol :
a {
float: left;
border : 2px solid white;
}
Le second problème est dû au fait que l'image est une balise en-ligne et qu'elle s'aligne sur la ligne de texte par défaut. Le problème se corrige en donnant une hauteur d'interligne minime :
a {
float: left;
border : 2px solid white;
line-height: 1px;
}
Voir le résultat avec la solution "position absolue"
Voir le résultat avec la solution "float"
A vous de jouer ?
Les solutions proposées ne sont pas la panacée, comme vous vous en doutez : les positionnement absolus et flottant ont leur lots de contraintes.
Mais peut-être connaissez-vous une autre solution, ou avez-vous envie de vous amuser un peu à en trouver :-)