Table des matières

Voici deux méthodes pour afficher un cadre autour d'une image lorsque la souris se trouve sur cette dernière.

Méthode 1:

La première méthode a le gros avantage de n'utiliser que le langage CSS malheureusement Internet explorer ne gérant l'évènement :hover que sur des liens, cette méthode ne fonctionne pas correctement sur ce navigateur.

css
<style type="text/css">
.image {
	border: 0;
}
.image:hover  {
	border: #00F 1px solid;
}
</style>

Ici on détermine la class “image”.

On remarquera qu'il n'est pas nécessaire de spécifier toutes les valeurs de border dans le premier cas, une épaisseur de 0 suffit.
HTML
<img class="image" alt="mon image" src="chemin_de_mon_image" border="0" />

On attribut à la balise image la class “image”

Méthode 2:

Cette méthode utilise du javascript et du Css. Elle est par contre compatible avec tous les navigateurs.

javascript
<script language="javascript" type=text/javascript>
function affich_cadre(arg) {
	arg.style.border = '#00F 1px solid'
}
function efface_cadre(arg) {
	arg.style.border = '0'
}
</script>

On créé deux fonctions la première permet d'afficher la bordure autour de l'image, la seconde permet d'effacer la bordure.
“arg” Correspond à l'élément sur lequel on veut afficher cette bordure il sera précisé lors de l'appel de la fonction.

html4strict
<img onMouseOver="affich_cadre(this);" onmouseout="efface_cadre(this)" alt="Mon_image" "chemin_de_mon_image" border="0" />

onMouseOver: signifie au survol de la souris.
onMouseOut: signifie lorsque la souris ne survole plus.
On appel la fonction affich_cadre lorsque la souris survol l'image et la fonction efface_cadre lorsque la souris sort de l'image.
”(this)” permet d'indiqué à la fonction sur quel élément appliquer le cadre c'est à dire ici l'image survolé.

Methode 3

On peu faire aussi une methode 100% CSS compatible IE et firefox mais cela oblige a mettre une bordure a l'image même au repos. Car sinon, l'image se retrouve décalé de 1px

css
a {
/*
en affichant les lien en BLOCK avec un Float Left, le lien prend bien les dimenssions de l'image.
Le border au repos permet de pas avoir de dacalage au survol
*/
	display:block;
	float:left;
	border:1px solid #000
}
a:hover {
/*
Affiche le border au survol
*/
	border:1px dashed #888
}
a img {
/*
met une bordure de 0 au image contenu dans des liens
*/
	border:0
}

et le html donne :

html4strict
<a href="#" ><img src="b147700d.jpg" /></a>