Bordures : conflit entre hover et javascript ?
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:
1
2
|
<img ID="4" class="miniature" onClick="vision.src='images4.jpg'; descript(4);n=4" src='images4.jpg'> |
Et ma div principale :
Code:
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:
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:
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 :)
