Discussion :

[will89]

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é !!

[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+

[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 :

Voila le code modifié :

JS :

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 à 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 :

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

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 :

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

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

[E.Bzz]

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

A+

[SpaceFrog]

Code :

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

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

[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 ?