Dradra - Forum de test~


 

Partagez | 
 

 [Tuto] Encadré quand on passe la souris sur une image

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
avatar
► La noble de Serdaigle ◄


Messages : 92
Date d'inscription : 02/01/2008
Localisation : Québec

Feuille de personnage
bla bla: lksdlksajnd
jsjhdkd: dfdsfsdgfg
ddfddd:

MessageSujet: [Tuto] Encadré quand on passe la souris sur une image   Dim 9 Aoû - 20:42

Sur page d'accueil
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">TEXTEDANSBULLE<br/></font></td></tr><tr align="center"/></tbody></table></span></a>
Dans le 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: 30px; /* 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;
}
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://tempsnouveau.your-board.com
 

[Tuto] Encadré quand on passe la souris sur une image

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

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Dradra - Forum de test~ :: Catégorie 3 :: 
Forum 3.1
-