Problème infobulle sur une image [Résolu]

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

absot · 05/01/2011, 12h13

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 :

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

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 :

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

03/01/2011, 11h20	#2
Vil'Coyote Modérateur Développeur Web Inscription : février 2008 Messages : 3 302 Détails du profil Informations personnelles : Âge : 31 Localisation : France, Marne (Champagne Ardenne) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : février 2008 Messages : 3 302 Points : 4 480 Points : 4 480	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.
	00

03/01/2011, 13h49	#4
Vil'Coyote Modérateur Développeur Web Inscription : février 2008 Messages : 3 302 Détails du profil Informations personnelles : Âge : 31 Localisation : France, Marne (Champagne Ardenne) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : février 2008 Messages : 3 302 Points : 4 480 Points : 4 480	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.
	00

03/01/2011, 13h59	#5
absot Nouveau Membre du Club Inscription : février 2009 Messages : 261 Détails du profil Informations forums : Inscription : février 2009 Messages : 261 Points : 30 Points : 30	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.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email