Discussion :

[laurentSc]

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à.

[othmane126]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[@Ikey]

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

Voila une proposition :
.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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é.

Donc on recommence
.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
a img
{
    border: 4px solid #fff;
}
a:hover img
{
    border: 4px solid #000;
}

[othmane126]

Essai plutôt celui là

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[nickoeuh]

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

[laurentSc]

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).

[Candygirl]

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

Un simple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[othmane126]

Bonjour ,

@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.

[laurentSc]

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