Clignotement d'une vignette
Bonjour, c'est encore moi avec mon site de vente de fringues en ligne. Je vous avais déjà posé quelques questions à propos d'une vignette qui s'affiche au passage de la souris sur une image. Depuis les besoins ont un peu évolués et la vignette ne suit plus la souris mais elle s'affiche en bas à droite de la photo.
Ca marche nickel à ceci près : lorsque l'on place le curseur sur la vignette, elle se met à clignoter de manière très désagréable. Si quelqu'un a une idée, je pense que ça vient du onmouseout de l'image qui se déclenche lorsque l'on met la souris sur la vignette (alors que l'on est toujours sur l'image puisque la vignette est superposée).
Bref, regardez par vous-même et dites moi ce que vous en pensez...
Et si quelqu'un a une suggestion sur ce clignotement, qu'il se fasse entendre :D
Voila comme d'hab le code : Javascript :
Code:
1
2
3
4
5
6
7
8
9
| function pop(vign)
{
document.getElementById(vign).style.visibility = 'visible'; // on fait apparaître le détail
}
function disparaitre(vign)
{
document.getElementById(vign).style.visibility = 'hidden'; // on fait disparaitre le détail
} |
HTML (je vous mets juste une image mais c'est pareil pour les autres) :
Code:
1
2
3
4
5
6
7
8
9
| <a href="/marques.php" title="Test 32">
<img src="/img-collection/10032-01-b.jpg" alt="Test 32"
onmouseover="pop('vig10032')" onmouseout="disparaitre('vig10032')" />
</a>
<div id="vig10032" class="vignart">
Tailles dispo. : 36, 38, 40<br />
Plusieurs coloris dispo.<br />
<img src="/img-collection/10032-01-z.jpg" alt="Détail de Test 32" />
</div> |
et pour finir le CSS de la vignette :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| .vignart {
position: relative;
background-color: #333333;
z-index: 5;
width: 120px;
height: 144px;
overflow: hidden;
padding: 3px;
font-size: 10px;
font-family: Tahoma;
color: #FFFFFF;
border: 2px dashed #FF33CC;
text-align: left;
margin: -160px 0px 0px 76px;
visibility: hidden;
} |
