Afficher une infobulle sur une image
Absot
Messages postés
819
Statut
Membre
-
lierguois -
lierguois -
Bonjour, je voudrais que lorsque ma souris passe sur une image, une infobulle s'affiche, j'ai trouvé un tutoriel sur internet qui explique les infobulle mais pour pour les liens et non les images, j'ai essayé avec les propriétés img dans mon css mais sans succès et sur google, je ne trouve pas beaucoup de réponses..
Voici le tutoriel en question: http://www.siteduzero.com/tutoriel-3-34410-modifier-l-apparence-d-une-infobulle.html
Je pensais faire comme dans le tutoriel et c'est même peut-être uniquement comme cela qu'il faut faire, je voudrais avoir mon image puis dans un span, mon texte que je veux afficher dans l'infobulle.
Voici le tutoriel en question: http://www.siteduzero.com/tutoriel-3-34410-modifier-l-apparence-d-une-infobulle.html
Je pensais faire comme dans le tutoriel et c'est même peut-être uniquement comme cela qu'il faut faire, je voudrais avoir mon image puis dans un span, mon texte que je veux afficher dans l'infobulle.
A voir également:
- Info bulle html
- Légender une image - Guide
- Créer une image iso - Guide
- Comment rechercher une image sur google - Guide
- Agrandir une image - Guide
- Mettre une image en filigrane sur word - Guide
2 réponses
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title>
<style type="text/css">
/* Rend invisible tout notre bloc span */
a.info_bulle span
{
position : absolute;
top : -2000em;
left : -2000em;
width : 1px;
height : 1px;
overflow : hidden;
background : #DDEEFF; /* Définition du fond, sinon on a le même que notre lien */
border : 1px solid #6699FF; /* Définition des bordures */
}
a.info_bulle
{
color : #2F368A; /* Couleur de notre lien */
font-size : 1.2em; /* Taille de la police */
text-decoration : none; /* Aucun soulignement du texte */
padding : 2px 12px 2px 2px; /*Définition des marges intérieures de notre lien */
/* Définition de l'arrière plan de notre lien */
background : transparent url('comment.gif') no-repeat right center;
}
/* Rend visible tout notre bloc span et lui attribue une taille */
a.info_bulle:hover span, a.info_bulle:focus span, a.info_bulle:active span
{
top : auto;
left : auto;
width : 220px;
height : auto;
overflow : visible;
}
a.info_bulle:hover
{
border : 0; /* ligne qui corrige le bug d'IE6 et inférieur */
}
position : relative; /* Indispensable pour le bon positionnement de l'info-bulle */
</style></head><body>
<a class="info_bulle" href="quelquepart">
<div style="text-align: center;"><img style="width: 375px; height: 500px;" alt="" src="images/x.jpg">
<span>
texte infobulle
</span>
<a class="info_bulle" href="quelquepart">
<img style="width: 375px; height: 500px;" alt="" src="images/x.jpg">
<span>
texte infobulle
</span> </div> </a>
</body></html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title>
<style type="text/css">
/* Rend invisible tout notre bloc span */
a.info_bulle span
{
position : absolute;
top : -2000em;
left : -2000em;
width : 1px;
height : 1px;
overflow : hidden;
background : #DDEEFF; /* Définition du fond, sinon on a le même que notre lien */
border : 1px solid #6699FF; /* Définition des bordures */
}
a.info_bulle
{
color : #2F368A; /* Couleur de notre lien */
font-size : 1.2em; /* Taille de la police */
text-decoration : none; /* Aucun soulignement du texte */
padding : 2px 12px 2px 2px; /*Définition des marges intérieures de notre lien */
/* Définition de l'arrière plan de notre lien */
background : transparent url('comment.gif') no-repeat right center;
}
/* Rend visible tout notre bloc span et lui attribue une taille */
a.info_bulle:hover span, a.info_bulle:focus span, a.info_bulle:active span
{
top : auto;
left : auto;
width : 220px;
height : auto;
overflow : visible;
}
a.info_bulle:hover
{
border : 0; /* ligne qui corrige le bug d'IE6 et inférieur */
}
position : relative; /* Indispensable pour le bon positionnement de l'info-bulle */
</style></head><body>
<a class="info_bulle" href="quelquepart">
<div style="text-align: center;"><img style="width: 375px; height: 500px;" alt="" src="images/x.jpg">
<span>
texte infobulle
</span>
<a class="info_bulle" href="quelquepart">
<img style="width: 375px; height: 500px;" alt="" src="images/x.jpg">
<span>
texte infobulle
</span> </div> </a>
</body></html>
