Infobulle en CSS qui clignote sous IE

Version imprimable

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:

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:

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:

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

15/04/2009, 14h52
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:

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?

Bonjour,

Essaye ceci :

Code:

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

15/04/2009, 16h37
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 ... ;)
15/04/2009, 16h49
Macmillenium

Citation:

Envoyé par keaton2000

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.

Citation:

Envoyé par keaton2000

et les fonds ne disparaissent plus sous IE6 ... ;)

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

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:

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