Afficher une infobulle sur une image
Fermé
Absot
Messages postés
778
Date d'inscription
mardi 28 octobre 2008
Statut
Membre
Dernière intervention
4 septembre 2020
-
17 déc. 2010 à 18:50
lierguois - 1 févr. 2011 à 06:51
lierguois - 1 févr. 2011 à 06:51
A voir également:
- Infobulle image html
- Frédéric cherche à faire le buzz sur les réseaux sociaux. il a ajouté une image de manchots sur une image de plage. retrouvez l'image originale de la plage. que cachent les manchots ? ✓ - Forum Windows
- Image cliquable html ✓ - Forum Internet / Réseaux sociaux
- Recherche par image - Guide
- Image iso - Guide
- Positionner une image html ✓ - Forum HTML
2 réponses
Absot
Messages postés
778
Date d'inscription
mardi 28 octobre 2008
Statut
Membre
Dernière intervention
4 septembre 2020
44
18 déc. 2010 à 12:17
18 déc. 2010 à 12:17
Personne ne sait svp?
<!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>