Lien avec une image

Bonsoir,

j'utilise une image pour faire un lien, mais je voudrais qu'on visualise que c'est un lien (comme les textes qui deviennent soulignés qd la souris les survolent). Peut-on faire, par exemple, que les images ne soient encadrées que qd la souris les survole ?
Au début, j'avais posté ce msg ailleurs, mais on m'a dit que ça concernait plutôt le CSS, donc je le remets là.

Bonjour, je ne sais pas comment en peut faire ça uniquement avec du css, mais voila avec du javascript et css, essai et dis nous est ce que ça marche!

Code:

---

<a href="#" ><img onMouseOut="this.style.border='0'" onmouseOver="this.style.border='2px solid #00AAFF'" style="border:0" src="icon_products_big.png"/></a>

---

@othmane126> donne moi un couteau que je m'ouvre les veines :aie:

Voila une proposition :
.html

Code:

---

1 2 3

... <div id="image"><a href="">&nbsp;</a></div> ...

---

.css

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

#image { width: 70px; height: 70px; border: 2px solid #fff; background:url(image1.jpg) top left no-repeat; } #image:hover { border: 2px solid #000; background:url(image2.jpg) top left no-repeat; } #image>a { text-decoration: none; display: block; width: 70px; height: 70px; }

---

En partant du principe que tes images font 70x70px.
Enfin après relecture ce n'est pas ce que tu as demandé.:D

Donc on recommence
.html

Code:

---

1 2 3

... <a href=""><img src="image.jpg" alt="description" /></a> ...

---

.css

Code:

---

1 2 3 4 5 6 7 8

a img { border: 4px solid #fff; } a:hover img { border: 4px solid #000; }

---

Essai plutôt celui là

Code:

---

1 2	<a href="#" ><img onMouseOut="this.style.border='2px solid #FFFFFF'" onmouseOver="this.style.border='2px solid #00AAFF';" style="border:2px solid #FFFFFF" src="icon_products_big.png"/></a>

---

Lègère modification pour l'affichage.;)

Pourquoi utiliser du js alors qu'on peut utliser une balise toute simple en css ?

J'ai essayé en 1er la 2e proposition de othmane126, et ça marche, donc je ne vais pas plus loin, même si je pense que la proposition de @Ikey marcherait aussi et me paraît plus simple (je ne connais pas le js).

Citation:

---

Envoyé par laurentSc

Peut-on faire, par exemple, que les images ne soient encadrées que qd la souris les survole ?

---

Un simple:

Code:

---

1 2	a img {border:5px solid transparent;} a:hover img{border-color:red;}

---

devrait faire l'affaire.

Sauf que IE6 a quelques problèmes. Il faut remplacer le transparent par la couleur de fond et rajouter une propriété quelconque sur le :hover pour que cela fonctionne correctement:

Code:

---

1 2 3

a img {border:5px solid #FFF;} a:hover {border:0;} a:hover img{border-color:red;}

---

Bonjour :aie:,

Citation:

---

@othmane126> donne moi un couteau que je m'ouvre les veines

---

Ce n'été qu'une proposition même si ce n'étais pas la meilleure.

Devant l'enthousiasme pour le js, je l'ai remplacé par un css, et ça marche aussi...