Problème infobulle sur une image

Version imprimable

Bonjour, j'ai besoin de créer une infobulle sur une image, j'ai regardé un tutoriel qui montre comment faire mais sur un lien donc avec une balise ouvrante et fermante or pour une image, une seule balise est nécessaire donc cela ne fonctionne pas.

Il me faut une infobulle avec un contour vert et le centre en blanc.

Voilà ce que j'avais fais:

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
 
<style type="text/css"> 
a.info  
{ 
   position: relative; 
   color: black; 
   text-decoration: none; 
   border-bottom: 1px gray dotted;  
} 
a.info span  
{ 
   display: none;  
} 
 
a.info:hover span  
{ 
   display: inline;  
   position: absolute; 
   white-space: nowrap;  
   top: 30px;  
   left: 20px; 
   background: white; 
   color: #6495ED; 
   padding: 3px; 
   border: 1px solid #6495ED; 
   border-left: 4px solid #046380; 
   border-right: 4px solid #046380; 
   border-top: 4px solid #046380; 
   border-bottom: 4px solid #046380; 
} 
</style> 
 
<html> 
<body> 
 
<img src="img/ajouter.PNG" class="info" /><span>bonjour</span> 
 
</body> 
</html>

03/01/2011, 11h20
Vil'Coyote

ta classes info est définie uniquement pour un type lien donc suffit de dédoubler tes éléments sans le a. devant ou de définir une autre classe dans ton css. à toi de voir.

Je viens d'enlever tout les a. dans mon CSS et ça ne change rien, j'ai toujours mon image suivit du texte qui devrait s'afficher dans une infobulle.

Voici le nouveau code:

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
41
42
43
44
45
46
 
<style type="text/css">
info 
{
   position: relative;
   color: black;
   text-decoration: none;
   border-bottom: 1px gray dotted;
}
 
info span 
{
   display: none;
}
 
info:hover span 
{
   display: inline;
   position: absolute;
   white-space: nowrap;
   top: 30px;
   left: 20px;
   background: white;
   color: #6495ED;
   padding: 3px;
   border: 1px solid #6495ED;
   border-left: 4px solid #046380;
   border-right: 4px solid #046380;
   border-top: 4px solid #046380;
   border-bottom: 4px solid #046380;
}
 
.test
{
        text-align:center;
}
 
</style>
 
<html>
<body>
 
<img src="img/ajouter.PNG" class="info" /><span>bonjour</span>
 
</body>
</html>

03/01/2011, 13h49
Vil'Coyote

va falloir que tu apprenne les bases du css je pense.

.info déjà et vérifie bien tes classes, là tu définis le css pour une classe info sur un span.
03/01/2011, 13h59
absot

Oups pardon, c'est juste un oublie dans la précipitation pour les . devant les nom de class

Je me suis inspiré d'un tutoriel où ils font <a href="#" class="info">[ELEMENT]<span>[INFOBULLE]</span></a> comme c'est un lien.
04/01/2011, 15h46
monkey_monk
Bonjour,

la technique que tu cherches a utiliser fonctionne avec le positionnement (<span> en position:absolute dans un <a> en position:relative).

Il te faut donc un container pour englober ton image et ton <span>.

Un peu comme ceci :
Code:

1 2 3 4 5 <div> <img src="[whatever]" alt=""/> <span class="info">Une image de 'whatever</a> </div>
La <div> recevant les propriétés du <a> utilisé dans le tuto.
(c-à-d. position:relative, etc...)

Citation:
Envoyé par monkey_monk
Bonjour,

la technique que tu cherches a utiliser fonctionne avec le positionnement (<span> en position:absolute dans un <a> en position:relative).

Il te faut donc un container pour englober ton image et ton <span>.

Un peu comme ceci :
Code:

1 2 3 4 5 <div> <img src="[whatever]" alt=""/> <span class="info">Une image de 'whatever</a> </div>
La <div> recevant les propriétés du <a> utilisé dans le tuto.
(c-à-d. position:relative, etc...)
Ca ne fonctionne pas comme ca, il faut mettre class="info" dans la balise div et non dans celle du span.

Voilà mon code final pour ceux qui auraient la même question que moi:
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 41 42 43 44 45 46 47 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> .info { position: relative; } .info span { display: none; } .info:hover span { display: inline; position: absolute; white-space: nowrap; top: 30px; left: 20px; background: white; color: black; padding: 3px; border: 1px solid #6495ED; border-left: 4px solid #046380; border-right: 4px solid #046380; border-top: 4px solid #046380; border-bottom: 4px solid #046380; } </style> <html> <body> <div class="info"> <img src="images/ajouter.PNG" alt="" /> <span >Un jolie texte</span> </div> </body> </html>