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 : 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
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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é !!