Discussion :

[will89]

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

Voila comme d'hab le code : Javascript :

Code :

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

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 :

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

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 :

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
.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;
}

[E.Bzz]

Bonjour,
si ta vignette apparait sous le curseur, c'est normal : le pop() du omouseover fait perdre le focus à l'<img> et déclenche donc le onmoueout ... qui fait disparaitre la vignette, ce qui déclenche le onmouseover ... qui déclenche le onmouseout ...qui déclenche ...
=> mets le onmouseout sur l'image de la vignette ou utilise un timer.

A+

[will89]

Merci c'est nickel. Je vous remets le code HTML car c'est le seul qui a changé. Quant au reste, c'est toujours accessible au-dessus

Code :

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

1
2
3
4
5
6
7
8
9
10
<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" onmouseover="pop('vig10032')"
      onmouseout="disparaitre('vig10032')">
   Tailles dispo. : 36, 38, 40<br />
   Plusieurs coloris dispo.<br />
   <a href="/marques.php" title="Test 32"><img src="/img-collection/10032-01-z.jpg" alt="Détail de Test 32" /></a>
</div>

Merci bien du renseignement E.Bzz...