Il faut toujours viser la lune car même en cas d'échec on atterrit au milieu des étoiles.(Oscar Wilde)
Index des thèmes Index des pages My BookMarks A propos de Zecyb Le réseau de Zecyb
▼ Table des matières

INFOBULLES


Les infobulles utilisées à titre expérimental dans ce paragraphes sont réalisées à partir d'un siteduzero.comcode (lien externe) écrit par siteduzero.com Shadow Blade (lien externe).

yeswiki
Le bon fonctionnement CSS HTML de ce paragraphe est rendu possible dans Yeswiki par l'ajout des règles de style à l'intérieur de la balise HTML <style> présente en haut de cette page en mode édition.
Cette méthode a été abandonnée après la migration de zecyb.org vers Yeswiki car elle implique un recours fréquent à l'écriture de code HTML contre-productif dans cet environnement.

Code HTML


<p>Les infobulles utilisées à titre expérimental dans ce paragraphes sont réalisées à partir d'un <a class="info" href="http://www.siteduzero.com/informatique/tutoriels/modifier-l-apparence-d-une-infobulle"><span>siteduzero.com</span>code</a> (lien externe) écrit par <a  class="info" href="http://www.siteduzero.com/membres-294-3852.html"><span>siteduzero.com</span> Shadow Blade</a> (lien externe).</p>

Code CSS


/*infobulle http://www.siteduzero.com/tutoriel-3-34410-modifier-l-apparence-d-une-infobulle.html*/<br />
a.info
{
position: relative;
color: #ffec88;
text-decoration: none;
border-bottom: 1px #ffec88 dotted; /*souligne le texte */
}
a.info span {
display: none; /*masque l'infobulle */
}
a.info:hover {
background: none; /* correction d'un bug IE */
z-index: 500; /*définit une valeur pour l'ordre d'affichage */

cursor: help; /*change le curseur par défaut en curseur d'aide */
}
a.info:hover span
{
display: inline; /*affiche l'infobulle */
position: absolute;
/* white-space: nowrap;  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; /* positionne notre infobulle */
left: 30px;
background: #ff6347;
color: #ffec8b;
padding: 1px;
border: 1px solid #ffec8b;
}a.info
{
position: relative;
color: #ffec88;
text-decoration: none;
border-bottom: 1px #ffec88 dotted; /*souligne le texte */
}
a.info span {
display: none; /*masque l'infobulle */
}
a.info:hover {
background: none; /* correction d'un bug IE */
z-index: 500; /*définit une valeur pour l'ordre d'affichage */

cursor: help; /*change le curseur par défaut en curseur d'aide */
}
a.info:hover span
{
display: inline; /*affiche l'infobulle */
position: absolute;
/* white-space: nowrap;  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; /* positionne notre infobulle */
left: 30px;
background: #ff6347;
color: #ffec8b;
padding: 1px;
border: 1px solid #ffec8b;
}

Crédits photos Licence Creative Commons