Discussion :

[Angelik]

Bonjour tout le monde ! J'espère que je post au bon endroit sinon désolé

Voilà, J'ai récupérér un javascript "info bulle" qui permet au survol d'une image d'avoir l'info sur l'image.

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
 
<SCRIPT LANGUAGE="JavaScript">
 
chaine=""
+"<div id='text' style='position:absolute;left:4px;top:80px;width:1px;height:1px;'></div>"
+"<Layer name='text' left='4' top='80' width='100' height='16'></Layer>"
document.write(chaine);
 
bname=navigator.appName;var Xpos=0;var Ypos=0;bversion=parseInt(navigator.appVersion);
var ebulle=0;
 
if (bname=="Netscape"){brows=true}
else{brows=false}
 
if(brows){
 document.captureEvents(Event.MOUSEMOVE);
 function MouveA(evnt) {
  Xpos = evnt.pageX+window.pageXOffset;
  Ypos = evnt.pageY+window.pageYOffset;
 }
 document.onMouseMove = MouveA;}
else {
 function MouveB() {
  Xpos = event.clientX+document.body.scrollLeft;
  Ypos = event.clientY+document.body.scrollTop;
 }
 document.onmousemove = MouveB;
}
 
function bubulle() {
 var cx;var cy;
 cx=Xpos-400;cy=Ypos-250;
 if (brows) {document.text.left=cx;document.text.top=cy;}
 else {document.all.text.style.left=cx;document.all.text.style.top=cy;}
 setTimeout("bubulle()",10)
}
 
function bulle(texte){
 if (ebulle==0) {
  if (brows){
   document.layers['text'].document.writeln('<table border=0 cellpading=1 cellspacing=1 bgcolor="black"><tr><td bgcolor=#6699FF><font color=#FFFFFF size=2 face=verdana><NOBR>'+texte+'</NOBR></font></TD></TR></TABLE>');
   document.layers['text'].document.close();
  }
  else{
   text.innerHTML='<table border=0 cellpading=1 cellspacing=1 bgcolor="black"><tr><td bgcolor=#FFCC66><font color=#000000 size=2 face=verdana><NOBR>'+texte+'</NOBR></font></TD></TR></TABLE>';
  }
  ebulle=1;
 }
}
 
function cbulle(){
 if (brows){document.layers['text'].document.writeln('');document.layers['text'].document.close();}
 else{text.innerHTML='';}
 ebulle=0;
}
</SCRIPT>
 
<?
$query = mysql_query("SELECT * FROM produit");    
        while ($row = mysql_fetch_row($query)) {
if ($row[2] != "") {
 
 
 
 
                $img = "<td><center><a href=\"$row[6]\" onmouseover='bulle(\"Blog N° <b>$row[0]</b> <BR> Pays : <b>$nomPays</b> <br> $row[6]\")' onmouseout='cbulle()' target=blank><img src=\"pays/$row[1].gif\" width='10' border='1' bordercolor=#ffffff></a></td>";
                     }
 
?>

Mon site est réalisé en css et les images s'affichent à droite d'un menu fixe.

J'en viens à mon problème ... Sous mozilla, l'info bulle s'affiche au dessus des "cadres" c a d que les infos bulle des images situées à l'extrémité de la zone s'affichent correctement...

Alors que sous Internet Explorer c'est l'inverse, les infos bulles s'affichent sous les cadres et ne sont donc que partiellement visibles sur les images situées à l'extrémité de la zone ...

En espérant avoir été assez claire dans mon explication >> n'hésitez à me demander d'autres infos concernant ce problème ...

Merci d'avance !

[grabriel]

Salut,

Vu que tu as utilisé un script déjà fait que penses tu de celui-ci beaucoup plus simple et uniquement en css.

http://dypso.free.fr/tech/css_infobulle.php

Je ne sais pas s'il réponds à tes attentes, mais il s'affiche pareil sous ie7 et sous ff2.

[Angelik]

Coucou,

J'ai un peu de mal à voir comment l'intégrer à chaque images ... en sachant que chaque image est contenu dans une base de donnée avec url, nom, ... [informations contenues dans l'info bulle]

Excuse, je suis un peu novice Merci de ton aide

[grabriel]

Mais y'a pas de problèmes ma chef :

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
 
<STYLE>
a.info{
    position:relative; 
    z-index:24; background-color:#ccc;
    color:#000;
    text-decoration:none}
 
a.info:hover{z-index:25; background-color:#ff0}
 
a.info span{display: none}
 
a.info:hover span{ 
/*le contenu de la balise span ne 
sera visible que pour l'état a:hover */
 display:block; 
 position:absolute;
 
 
    top:2em; left:2em; width:15em;
    border:1px solid #6699cc;
    background-color:#eeeeee; color:#6699cc;
    text-align: justify;
    font-weight:none;
    padding:1px;
 
    }
</STYLE>
 
<?
$query = mysql_query("SELECT * FROM produit");    
        while ($row = mysql_fetch_row($query)) {
if ($row[2] != "") { 
                $img = "<td><center><a href=\"$row[6]\" class=info target=blank><img src=\"pays/$row[1].gif\" width='10' border='1' bordercolor=#ffffff><span>Blog N° <b>$row[0]</b> <BR> Pays : <b>$nomPays</b> <br> $row[6]</span></a></td>";
                     } 
?>

En gros ca donne un truc comme ca :

Code :

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

<a class="info" ....> <span>le contenu de ton info bulle</span><img .../></a>

[Angelik]

Re

Merci de ton aide Grabriel ... Le code marche impec effectivement sauf que l'info bulle apparaît sous mes cadres donc jai le même problème qu'auparavant sur les deux navigateurs cette fois. Le point positif est qu'il suffit de changer un "paramètre" je pense pour que l'info bulle apparaisse au dessus du cadre de mon site...

Voilà, en tt cas merci de ta rapidité

[grabriel]

ouais faut que tu joues avec les paramètres
top:2em; left:2em; pour positionner ton info bulle ou tu veux.
Tu peux même récupérer la taille de ton image [getimagesize] et positionner ta bulle par rapport à la taille de ton image.