Bordures : conflit entre hover et javascript ?

**vinze60** · 24/11/2010, 09h20

Bonjour,

Je travail actuellement sur une galerie photo. Le schema est classique : des images miniatures et une grande div pour afficher l'image séléctionnée :

Mes miniatures sont affichées de la façon suivante (exemple pour ma miniature n°4) :

Code :

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

1
2
 
<img ID="4" class="miniature" onClick="vision.src='images4.jpg'; descript(4);n=4" src='images4.jpg'>

Et ma div principale :

Code :

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

1
2
 
<DIV ID="image"><img src="" name="vision"></DIV>

J'applique, via le CSS, le style qui me permet d'avoir un contour de l'image lorsque de passe ma souris dessus :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
.miniature{
position : relative;
top : 2px;
margin : 2px;
margin-right : 5px;
border : 1px solid transparent;
}
 
.miniature:hover{
border : 1px solid #17296e;
}

Puis, à l'aide de javascript, j'affiche dans ma DIV principale l'image sur laquelle j'ai clické et j'applique à ma miniature une bordure pour bien montrer que c'est elle qui est séléctionnée.

Ensuite, lorsque je click sur une autre image, toujours via javascript, j'enlève l'ancienne bordure :

Code :

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

1
2
3
4
 
function descript(id){
document.getElementById(n).style.border="1px solid transparent"; // On enlève la bordure sur l'ancienne
document.getElementById(id).style.border="1px solid #3d4931";} // On ajoute la bordure sur la nouvelle

Tout fonctionne très bien sauf quand je passe la souris sur une des miniatures qui a été cliqué, la bordure de suvolle ne s'affiche plus. Par contre pour celle qui n'ont jamais été clické, et donc jamais traité par javascript, le survolle fonctionne.

Please Help