Affichage selon navigateur

**Angelik** · 11/03/2007, 14h34

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** · 11/03/2007, 15h31

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** · 11/03/2007, 15h51

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** · 11/03/2007, 16h14

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** · 11/03/2007, 16h49

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** · 11/03/2007, 17h30

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.

**Angelik** · 11/03/2007, 17h39

ouais faut que tu joues avec les paramètres
top:2em; left:2em; pour positionner ton info bulle ou tu veux.

Oki en modifiant top et left je positionne mon info bulle par rapport à mon image mais pour que mon info bulle aparaisse au dessus de tous les "cadres" de mon site ?

tu vois ?

Merci de ta patience

lol

**grabriel** · 11/03/2007, 17h57

pour que mon info bulle aparaisse au dessus de tous les "cadres" de mon site

t'as le paramètre : z-index tu le mets supérieur au z-index de tes cadres. Montre plus de code parce que la c'est pas trop claire pour moi...

**stilobique** · 11/03/2007, 18h21

Une info bulle n'est pas censé s'afficher uniquement au passage de la souri ?

**grabriel** · 11/03/2007, 18h26

Envoyé par killpatate

Une info bulle n'est pas censé s'afficher uniquement au passage de la souri ?

Ouais c'est le cas!!!

**stilobique** · 11/03/2007, 18h35

Parce que en fait j'ai l'impressions qu'il y a une confussion ; en et j'avais lu trop vite j'avais cru que tu avais oublier de spécifier de laisser le champ contenant l'infobulle afficher.

**Angelik** · 11/03/2007, 18h37

En fait ma page principale fait appel à une feuille de style tel que include ("style04.css");

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
 
#Page
{
	z-index:3;
	position: relative;		
	width: 950px;			
	border: solid 1px #666;		
}
#EnTete
{
	background-color: #ffffff;		
	height: 240px;			
}
#Menu
{
    z-index:2;
	background: url(images/MENU_IE.png) no-repeat center top ;
	position: absolute;		
	left: 0;				
	background-color: #FFFFFF;		
	width: 190px;			
	height: 920px;			
	color: #fff;
	font-size: 12px;
}
#Menu02
{
    z-index:2;
	background: url(images/BLOGSEEK_IE.png) no-repeat center top ;
	position: absolute;		
	left: 0;				
	background-color: #FFFFFF;		
	width: 190px;			
	height: 250px;			
	color: #fff;
	font-size: 12px;
}
#Menu03
{
    z-index:2;
	background: url(images/BLOGSHAK_IE.png) no-repeat center top ;
	position: absolute;		
	left: 0;				
	background-color: #FFFFFF;		
	width: 190px;			
	height: 250px;			
	color: #fff;
	font-size: 12px;
}
 
#Menu04
{
    z-index:2;
	background: url(images/TOP_IE.png) no-repeat center top ;
	position: absolute;		
	left: 0;				
	background-color: #FFFFFF;		
	width: 190px;			
	height: 270px;			
	color: #666666;
	font-size: 12px;
}
 
#Menu05
{
    z-index:2;
	background: url(images/NEW_IE.png) no-repeat center top ;
	position: absolute;		
	left: 0;				
 
	width: 950px;			
	height: 40px;			
	color: #fff;
	font-size: 12px;
}
#Contenu
{
z-index:1;
margin-left: 190px;
 
height: 920px;
overflow: auto; 
font-size: 14px;
background-image: url(images/mbLogo10.jpg);
}
 
#HautDePage
{
    background-image: url(fd_ecran03.png);
	background-color: #FFFFFF;		
	height: 120px;			
	color: #fff;
	font-size: 12px;
}
 
#PiedDePage
{
	background-color: #666666;		
	height: 60px;			
	color: #CCCCCC;
	font-size: 12px;
}

voilà et voici le css qui correspond à l'info bulle :

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
 
a.info{
    position:relative; 
    z-index:4; background-color:#ccc;
    color:#000;
    text-decoration:none}
 
a.info:hover{z-index:5; 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;
 
 
    z-index:4;
	top:2em; left:-2em; width:15em;
    border:1px solid #6699cc;
    background-color:#eeeeee; color:#6699cc;
    text-align: justify;
    font-weight:none;
    padding:1px;
 
    }

Concrètement mon menu[#Menu] appel ma page "images" dans laquelle apparaissent les infos bulle au passage de la souris.

Pour l'instant ces infos bulle se trouvent sous le cadre de ma page principale (problème aux estrémités de ma page où l'info bulle apparaît sous le cadre) vous voyez ?

Merci d'avance

**XtoX** · 12/03/2007, 14h09

Dans ton css concernant les info-bulles, mais la propriété css z-index avec un grand nombre (ici, au vu de ton fichier css déjà existant, 10 devrait suffir).

**Angelik** · 12/03/2007, 14h35

J'ai mis les z-index de mon info bulle à 10 mais rien n'y fait, l'info bulle apparaît toujours en dessous ...

------------------------------------------------

Re

J'insiste un peu concernant ce post (désolé

)

Voilà je parcours les forums depuis ce matin à la recherche de ce qui pourrait faire mon bonheur

mais rien malheureusement ...

En fait, il faudrait dans mon css que l'info bulle soit dans l'absolue (si je puis dire) au dessus de tous mes cadres.

Pour récapituler ma page principale (index.php) fait appel à une feuille de style (style04.css) et mes images s'affichent via une autres pages (images.php) qui s'insère à l'intérieur de ma page principale (index.php) via le lien index.php?page=images où

Code :

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

case 'images': include ('images.php');break;

Voici le css de mon info bulle contenu dans ma page images.php

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
 
 
<style>
a.info{
    position:relative; 
    z-index:15; background-color:#ccc;
    color:#000;
    text-decoration:none}
 
a.info:hover{z-index:16; 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;
    
    
    z-index:15;
        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>";
                     }
}
?>

Voilà

encore merci pour le temps passé sur ce post

------------------------------------------------

Pour revenir au post initial, mon info bulle était à l'origine en javascript. Celle ci apparaissait au dessus de tous mes cadre sous firefox mais en dessous sous internet explorer ce qui me posait quelques souci arrivé aux extrémités de ma page où l'info bulle apparaissait à moitié caché sous le "cadre" ... et sous IE

Un membre m'a conseillé le CSS beaucoup plus souple effectivement. Le problème est que l'info bulle apparaît sous mes cadres que ça soit sous FF ou IE cette fois ...

Si quelqu'un à une solution et/ou une autre idée

Merci !

------------------------------------------------

En fait il y avait une raison de faire plusieurs posts et je le confesse volontiers (vous pardonnerez mon grand égoisme dans cette affaire): c'était comme tout le monde s'en doute de faire apparaître mon post en tête ...

Affichage selon navigateur

HTML

Discussions similaires

Partager

Partager