Discussion :

[keaton7]

Bonjour,

J'utilise la technique très répandue de l'infobulle en CSS qui fonctionnait a merveille jusqu'à ce que je m'aperçoive d'un bug fâcheux ...

En effet, mon infobulle apparait lors du survol d'une petite image 15x15px en forme de point d'interrogation pour donner des infos utiles. Le probleme est que cette image clignote au survol (ou disparait et re-apparait très vite) et uniquement sous IE6/7.

J'ai deux symptômes qui sont a mon sens causes par le même bug.

Le premier : (image seule)
Symptômes : L'image clignote.

HTML :

Code :

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

1
2
3
4
5
 
<a href='javascript:void(0)' class='infoBulle' id='imgQuestionNom'>
<img title="Aide civilite" alt="Aide civilite" src='images/question.png' class='icone' />
<span>Entrez ici votre civilite suivie de votre nom.</span>
</a>

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
 
a.infoBulle
	{
    position:relative; 
    z-index:24;
    text-decoration:none;
    }
 
a.infoBulle:hover
	{
	z-index:25;
	background:0;
	}
 
a.infoBulle span
	{
	display: none;
	}
 
a.infoBulle:hover span
	{ 
	display:block; 
	position:absolute;
	cursor:default;
	width:400px;
	color:black;
	top:20px; 
	left:20px;
	border:1px solid #ccc;
	text-align: justify;
	font-weight:normal;
	padding:1px;
	background-color:#FFF2BD;
	}

Le deuxième : (image + texte)
Symptômes : L'image disparait et le lien en survol en stable.

HTML :

Code :

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

1
2
3
4
5
 
<a href='javascript:void(0)' class='infoBulle' id='imgQuestionNom' >
Aide <img title="Aide civilite" alt="Aide civilite" src='images/question.png' class='icone' />
<span>contenu de l'aide ...</span>
</a>

CSS :
Idem premier exemple

J'imagine qu'une propriété non supportée en est la cause mais je ne trouve laquelle incriminer a vrai dire ...

D'avance merci pour vis pistes de recherche

[andry.aime]

Salut, j'ai testé ton code mais ça marche à merveille chez moi sur IE (sans autre contenue mais rien que ceux de ton Post)
z-index doit être accompagné de la position de l'élément

Code :

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

1
2
3
4
5
6
a.infoBulle:hover
	{
	z-index:25;
	background:0;
	position:absolute;
	}

Pourquoi mettre un attribut title dans img alors que tu mets un infobulle sur l'image?

[Macmillenium]

Bonjour,

Essaye ceci :

Code css :

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
 
a.infoBulle
	{
    position:relative; 
    z-index:24;
    text-decoration:none;
    }
 
a.infoBulle:hover
	{
	/* z-index:25; */ /*inutile */
	/* background:0; / /*inutile*/
	border:0; /* Indispensable pour IE6- */
	}
 
a.infoBulle span
	{
	display: none;
	position:absolute;
	z-index:25;
	width:400px;
	color:black;
	top:20px; 
	left:20px;
	border:1px solid #ccc;
	text-align: justify;
	font-weight:normal;
	padding:1px;
	background-color:#FFF2BD;
	}
 
a.infoBulle:hover span
	{ 
	display:block; 
	cursor:default;
	}

[keaton7]

La première solution ne change rien, la seconde déplace l'image vers le bas d'une dizaine de pixels par rapport au texte ... Mais ca a l'air de ne plus clignoter, mais l'image se promène pour une raison inconnue ... même sans survol, et les fonds ne disparaissent plus sous IE6 ...

[Macmillenium]

déplace l'image vers le bas d'une dizaine de pixels par rapport au texte ... se promène pour une raison inconnue ...

A toi de jouer sur le top et le left.

et les fonds ne disparaissent plus sous IE6 ...

Ok, remplaces background:0; par background:none;

[keaton7]

Coucou,

Désole pour le temps de réaction, je trifouille pleins de trucs en meme temps ...

J'ai trouve d'où vient mon bug ! Et c'est plutôt un coup de chance ...

J'utilise un JS (pngFix) qui bidouille les png pour gérer la transparence sous IE < 7.

Quand je le desactive, miracle, plus rine ne clignote, l'image est stable.

Pour palier a ça, j'ai fait un truc très vilain, j'ai cale ma div d'infobulle au-dessus de l'image, si bien que au premier survol, la div s'affiche, et on ne survol plus un png bancal mais une div contenue dans mon "a" qui est stable.

Pour info, voila le 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
38
39
40
 
/*
 
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.
 
Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
 
*/
 
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
 
if ((version >= 5.5) && (document.body.filters)) 
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText 
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}