Entassement des créations d'Aëlys
 
Colorful Bubble Elegance Temptation Elegance Design GFX-Art
AccueilAccueil  Dernières imagesDernières images  RechercherRechercher  S'enregistrerS'enregistrer  ConnexionConnexion  
Le Deal du moment :
Pokémon EV06 : où acheter le Bundle Lot ...
Voir le deal

Partagez
 

 {HTML & CSS} Info-bulle sur une image (© Maiko)

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Aëlys
.Hakuna Matata ~
.Hakuna Matata ~
Aëlys

Informations personnelles

Féminin
Âge : 32


Messages : 178
Date d'inscription : 03/06/2009
Localisation : Dans mes logiciels !


{HTML & CSS} Info-bulle sur une image (© Maiko) Empty
MessageSujet: {HTML & CSS} Info-bulle sur une image (© Maiko)   {HTML & CSS} Info-bulle sur une image (© Maiko) EmptyMer 14 Oct - 18:50

© Maiko

CSS
Code:
a.imginfo {
  position: relative;
  color: #7d7d7d;
  text-decoration: none;
  border-bottom: 0px #7d7d7d solid; /* on souligne le texte */
}

a.imginfo span {
  display: none; /* on masque l'infobulle */
}
a.imginfo:hover {
  background: none; /* correction d'un bug IE */
  z-index: 500; /* on définit une valeur pour l'ordre d'affichage */
  cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.imginfo:hover span {
  display: inline; /* on affiche l'infobulle */
  position: absolute;
  white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
  top: -10px; /* on positionne notre infobulle */
  left: 20px;
  background: white;
  color: 7d7d7d;
  padding: 3px;
  border: 0px solid grey;
  border-left: 5px solid #b6b6b6;
  border-right: 3px solid #b6b6b6;
  border-top: 3px solid #b6b6b6;
  border-bottom: 5px solid #b6b6b6;
}

HTML
Code:
<font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="IMAGE PRINCIPALE"/></font><span><table width="125" cellspacing="1" cellpadding="1" border="0"><tbody><tr><td style="text-align: center;"><font size="1">TEXTE PRINCIPAL</font><br/></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="IMAGE DANS LA BULLE"/></a></td></tr><tr><td style="text-align: center;"><font size="1">TEXTE DANS LA BULLE<br/></font></td></tr><tr align="center"/></tbody></table></span></a>

Résultat :

Aëlys
Administratrice
Revenir en haut Aller en bas
https://le-placard-d-aelys.forumactif.com
 

{HTML & CSS} Info-bulle sur une image (© Maiko)

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Créer une page HTML et l'utiliser
» Position absolue d'une image
» Bases du HTML
» Les codes couleurs en HTML et en RGB
» Où mettre du HTML dans un forum ?

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
{* Le placard d'Aëlys } ~ :: Mes aides :: HTML-
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit