Problème infobulle sur une image

**absot** · 03/01/2011, 10h13

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 :

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

**Vil'Coyote** · 03/01/2011, 11h20

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.

**absot** · 03/01/2011, 11h28

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 :

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

**Vil'Coyote** · 03/01/2011, 13h49

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.

**absot** · 03/01/2011, 13h59

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.

**monkey_monk** · 04/01/2011, 15h46

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 :

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

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

Problème infobulle sur une image

HTML

Vue hybride

Discussions similaires

Partager

Partager