Clignotement de mon image sous Firefox

Version imprimable

Bonjour, bonjour, j'espère que je ne me trompe pas de forum car mon problème, en fait je sais pas s'il vient du CSS ou du Javascript donc voilà.

J'essaie de faire une galerie d'articles pour un site de commerce. La galerie marche nickel, grâce à vous, mais je voudrais maintenant rajouter une espèce d'infobulle qui s'affiche au survol de l'article avec dedans du texte et une image.

Voici la page à regarder : par là et le code correspondant.

Javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//  Script qui affiche l'infobulle pour les articles
 
decal_x = 20;  // décalage par rapport à la position horizontale de la souris (en px) // + vers la droite, - vers la gauche
decal_y = -50;  // décalage par rapport à la position verticale de la souris (en px)  // + vers le bas, - vers le haut
 
document.onmousemove = suivre_souris;
var contenu
function pop(contenu)
{
    var aff = 'Tailles dispo. : 36, 38, 40<br /><img src="./img-collection/' + contenu + '.jpg" alt="rien" />';
    document.getElementById("bulle").style.visibility = 'visible';
    document.getElementById("bulle").innerHTML = aff;
}
 
function disparaitre()
{
    document.getElementById("bulle").innerHTML = '';
    document.getElementById("bulle").style.visibility = 'hidden';
}
 
function suivre_souris(e)
{
    if (navigator.appName=="Microsoft Internet Explorer")
    {
        var x = event.x + document.body.scrollLeft + 207;
        var y = event.y + document.body.scrollTop + 197;
    }
    else
    {
        var x =  e.pageX;
        var y =  e.pageY;
    }
    var posx = x + decal_x;
    var posy = y + decal_y;
    document.getElementById("bulle").style.left = posx + 'px';
    document.getElementById("bulle").style.top  = posy + 'px';
}

CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
#bulle {
  position: absolute;
  background-color: #000000;
  z-index: 5;
  width: 126px;
  padding: 3px;
  visibility: hidden;
  font-size: 10px;
  font-family: Tahoma;
  color: #FFFFFF;
}

et le code HTML :

Code:

1
2
3
<div id="bulle"></div>
<a href="./marques.php" title="Test 32" onmouseover="pop('ouvert')" onmouseout="disparaitre()">
    <img src="img-collection/10032-01-b.jpg" alt="Test 32" /></a>

Je vous laisse admirer le superbe clignotement qui apparait sous Firefox.
Quant aux I.E. 6 et 7 c'est à peu près convenable, encore que l'infobulle disparaît de temps en temps je sais pas trop pourquoi.

Quelqu'un pour une piste ???
En attendant je poursuis les recherches de mon côté !!

27/05/2008, 17h09
E.Bzz

Bonjour,
le onmouseout se déclenche quand tu passes du <a href> à <img> d'où le clignotement.
Mets les onmouseover/onmouseout sur l'<img> et non sur le <a href> ...

EDIT : ceci dit, je vois pas le clignotement avec FF :?

A+

Bon bin en continuant à tâtonner ça ne clignote plus. J'ai pas trop compris ce que j'ai fait mais quoiqu'il en soit ça marche nickel :

Voila le code modifié :

JS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//  Script qui affiche l'infobulle pour les articles
 
decal_x = 20;  // décalage par rapport à l'abscisse de la souris (en px) // + vers la droite, - vers la gauche
decal_y = -50;  // décalage par rapport à l'ordonnée de la souris (en px)  // + vers le bas, - vers le haut
 
document.onmousemove = suivre_souris;
var contenu
function pop(contenu)
{
    var aff = 'Tailles dispo. : 36, 38, 40<br /><img src="./img-collection/' + contenu + '.jpg" alt="rien" />';
    document.getElementById("bulle").style.visibility = 'visible';
    document.getElementById("bulle").innerHTML = aff;
}
 
function disparaitre()
{
    document.getElementById("bulle").innerHTML = '';
    document.getElementById("bulle").style.visibility = 'hidden';
}
 
function suivre_souris(e)
{
    if (navigator.appName=="Microsoft Internet Explorer")
    {
        var x = event.x + document.body.scrollLeft + 207;
        var y = event.y + document.body.scrollTop + 197;
    }
    else
    {
        var x =  e.pageX;
        var y =  e.pageY;
    }
    var posx = x + decal_x;
    var posy = y + decal_y;
    document.getElementById("bulle").style.left = posx + 'px';
    document.getElementById("bulle").style.top  = posy + 'px';
}

HTML :

Code:

1
2
3
4
5
<div id="bulle"></div>
 
<a href="./marques.php" title="Test 32">
    <img src="img-collection/10032-01-b.jpg" alt="Test 32" onmouseover="pop('ouvert')" onmouseout="disparaitre()" />
</a>

Et le CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
#bulle {
  position: absolute;
  background-color: #000000;
  z-index: 5;
  width: 126px;
  padding: 3px;
  visibility: hidden;
  font-size: 10px;
  font-family: Tahoma;
  color: #FFFFFF;
}

Voilà j'espère que ça servira a quelqu'un. En plus c'est validé XHTML 1.0 Strict !!! :yaisse2:

27/05/2008, 17h10
SpaceFrog

tu parles de l'info bulle avec les tailles sur les froingue et une image sur les sacs ?

aucun clignottement chez moi ...
change de carte graphique ? ou d'ecran ?
27/05/2008, 17h12
E.Bzz

Citation:

Envoyé par will89

Bon bin en continuant à tâtonner ça ne clignote plus. J'ai pas trop compris ce que j'ai fait mais quoiqu'il en soit ça marche nickel

Tu as juste fais ce que je te conseillais ... avant que je l'écrive :king:

A+

Code:

1
2
 
    <img src="img-collection/10032-01-b.jpg" alt="Test 32" onmouseover="pop('ouvert')" onmouseout="disparaitre()" onclick=" self.loaction.href='./marques.php' ;" title="Test 32" />

vire la balise a ?
ou mets l'image en background de la balise a ...