Discussion :

[xenos]

Bonjour,

J'ai une infobulle qui s'affiche lorsque l'on passe au-dessus d'une image sous FireFox. Cependant cette infobulle ne s'affiche pas sous IE ...

Code html :

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

1
2
3
4
5
6
7
8
9
10
<td>
   <p>
      Newsletter &nbsp; 
         <a class="info">
            <img src="images/aide.png" alt="" />
            <span>&nbsp; &nbsp; &nbsp; En cochant "oui" vous serez abonné à la newsletter. Il s'agit d'un e-mail qui vous est envoyé régulièrement afin de vous tenir au courant des nouveautés.
            </span>
         </a>
   </p>
</td>

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
a img
{
	border: 0;
}
a.info
{
	position: relative;
	text-decoration: none;
}
 
a.info span
{
	display: none;
}
 
a.info:hover
{
	background: none;
	z-index: 500;
}
 
a.info:hover span
{
	display: inline;
	position: absolute;
	z-index: 500;
	top: 2em;
	left: 1em;
	background: #efcfcf;
	border: 1px solid #c95c5c;
	color: #c95c5c;
	padding: 1em;
	width: 300px;
	font-weight: normal;
}

D'après ce que j'ai lu jusqu'à présent pour que le hover soit pris en charge par IE il faut qu'il se trouve entre deux balises <a>. C'est ce que j'ai fait dans ce code.

En résumé : Qu'elles sont les adaptations à effectuer pour qu'une infobulle s'affiche sous IE, en passant au-dessus d'une image ?

D'avance merci pour vos réponses.

[Auteur]

bonsoir,

Ie ne reconnait une balise lien uniquement si elle possède un href :

Code :

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

1
2
3
4
5
6
 <a href="#" class="info">
 <img src="images/aide.png" alt="" />
 <span>&nbsp; &nbsp; &nbsp; En cochant "oui" vous serez abonné à la newsletter. Il s'agit d'un e-mail qui vous est envoyé régulièrement afin de vous tenir au courant des nouveautés.
 </span>
 </a>

c'est la seule chose qui manque

[xenos]

Merci pour ta réponse Auteur.

En rajoutant href="#", ça fonctionne sous IE 7.0.5730.11 en plus de FireFox 2.0.0.2.. Par contre ce code ne fonctionne pas sous Opera 9.10 ...

Qu'est-ce que je devrai encore rajouter pour que ça fonctionne sur tous les navigateurs ?

[Auteur]

En rajoutant href="#", ça fonctionne sous IE 7.0.5730.11 en plus de FireFox 2.0.0.2.. Par contre ce code ne fonctionne pas sous Opera 9.10...

Curieux... tu me poses une colle, tout y est a priori. Peut-être un problème au niveau des positions relative/absolute ou au niveau des z-index.
Sans le href ça marche sous Opéra

Quant au DOCTYPE, je ne suis pas sûr qu'il ait une influence dans ce cas (à tester quand même).




Euh, tu tiens à faire ta bulle en CSS ? Sinon, j'ai un script qui fonctionne sous IE et Firefox (je ne l'ai pas testé sous Opéra )

[MasterOfChakhaL]

Salut,

ton code fonctionne a peu près chez moi (opera 9.0). Il semblerait que, malgré le z-index, il faille prévoir suffisamment de place dans le conteneur du lien pour que l'info-bulle s'affiche.
Par exemple, en modifiant le padding-bottom (de ta balise <p> pour ton exemple), mais selon ta mise en page, ca peut-être compliqué (si tu as des background notamment...)

[xenos]

tu tiens à faire ta bulle en CSS ?

Oui. Je l'avais précédemment en javascript et je voudrais le faire maintenant en CSS.

Il semblerait que, malgré le z-index, il faille prévoir suffisamment de place dans le conteneur du lien pour que l'info-bulle s'affiche.
Par exemple, en modifiant le padding-bottom (de ta balise <p> pour ton exemple)

C'est ce que j'ai essayé de faire, mais ça ne fonctionne toujours pas avec Opera ...

Code html :

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

<td><p class="info">Newsletter &nbsp; <a href="#" class="info"><img src="images/aide.png" alt="" /><span style="width:300px;">&nbsp; &nbsp; &nbsp; En cochant "oui" vous serez abonné à la newsletter. Il s'agit d'un e-mail qui vous est envoyé régulièrement afin de vous tenir au courant des nouveautés et des promotions.</span></a></p></td>

J'ai rajouté dans le CSS :

Code CSS :

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

1
2
3
4
p.info
{
	padding-bottom:30px;
}