Les infobulles utilisées à titre expérimental dans ce paragraphes sont réalisées à partir d'un code écrit par R.Hunelrodrigue-hunel.com (lien externe) : comment modifier l'apparence d'une infobulle.
Code HTML de l'exemple 1
Les infobulles utilisées à titre expérimental dans ce paragraphes sont réalisées à partir d'un code écrit par <a href="http://rodrigue-hunel.com/tutoriels/t7/info-bulle-css.rh" class="bulle">R.Hunel <span>rodrigue-hunel.com : comment modifier l'apparence d'une infobulle </span>
code CSS de l'exemple 1
/* Rend invisible tout notre bloc span */
a.bulle span
{
position: absolute;
top: -1000em;
left: -1000em;
width: 150px;
height: auto;
overflow: hidden;
color: #4b4b4b;
background: #49ac64; /* Définition du fond, sinon on a le même que notre lien */
background : url(../img/tuxpaint2.png) repeat;
border-color : #ff2e1a;
border-style : solid;
border-width : 1px; /* Définition des bordures */
}
a.bulle
{
font-family : arial;
font-size : 10pt;
padding: 1px 1px 1px 1px; /*Définition des marges intérieures de notre lien */
position : relative; /* Indispensable pour le bon positionnement de l'info-bulle */
}
/* Rend visible tout notre bloc span et lui attribue une taille */
a.bulle:hover span, a.info_bulle:focus span, a.info_bulle:active span
{
top : 20px;
left : 0px;
width : 150px;
height : auto;
overflow : visible;
}
a.bulle:hover
{
border : 0; /* ligne qui corrige le bug d'IE6 et inférieur */
}
/*fin de style bulle d'après tutoriel http://r-hunel.developpez.com/tutoriels/css/info-bulle/ */
Focus n'est pas un angliscisme, ainsi qu'il est possible de le lire dans Wikipédia ; la langue anglaise n'a fait, une fois de plus, qu'utiliser directement le mot latin, contrairement à la langue française qui utilise le terme de "focale/focalisation".
On dit qu'une zone de l'écran "a le focus" lorsqu'il est possible d'y voir clignoter le curseur de la souris, dans un traitement de texte, par exemple ; on peut alors taper au clavier un texte qui sera donc inscrit dans la zone de focus ; une boîte de dialogue, ou une fenêtre a le focus lorsqu'elle est donc active ; si c'est un formulaire de demande de renseignement, chaque case du formulaire peut avoir le focus au fur et à mesure que l'on descend dans les cases prévues à cet effet. il en est de mêm avec tous les boutons cliquables.
voir aussi : border-color bordure
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 ShadowBlade (lien externe). Ce code est placé sous licence creativecommons.orgCreative Commons (lien externe).
Code HTML de l'exemple 2
Ce code est placé sous licence <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/fr/" class="info"> <span>creativecommons.org </span>Creative Commons </a>
Pourquoi une licence Creative Commons ?
code CSS de l'exemple 2
/*infobulle http://www.siteduzero.com/tutoriel-3-34410-modifier-l-apparence-d-une-infobulle.html*/
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;
}
Le bloc SPAN étant positionné en absolu, ces deux solutions très proches l'une de l'autre, provoquent une sortie de la DIV en cours qui se concrétise, lorsque la page est longue, par le défilement du texte du lien sur le bandeau du site. Il n'est donc possible de les utiliser que si la page n'utilise pas de défilement.
Effet du javascript tooltip.js de Laurent Jouanneau : passez votre souris sur "licence LGPL"
voir aussi : licence LGPL
Code HTML de l'exemple 3
passez votre souris sur <span> onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="cette licence permet de construire un code propriétaire à partir d'outils open sources">"licence LGPL"</span>
Le problème posé est celui d'un choix entre un code libre strictement HTML/CSS et un javascript LPGL qui peut être, par ailleurs, désactivé par configuration générale d'une navigation strictement sécurisée. Il n'est donc pas anodin et mérite réflexions car il comporte différents aspects liés à l'accessibilité, l'éthique open sources et W3C, le choix des langages utilisés.
L'a priori technique de ce site est de limiter autant que possible l'utilisation de tout élément externe au code HTML. Aussi, et après divers essais dont cette page est le témoignage, le problème des infobulles a été finalement réglé par utilisation de la méthode classique et donc ajout de l'attribut title qui renvoie, lui aussi, une infobulle au passage de la souris. Cette façon de faire qui est donc la plus simple a toutefois un petit inconvénient : il n'est pas possible d'intervenir sur l'esthétique de l'infobulle qui apparaît en utilisant la configuration standard du système.
exemple : javascript sous "licence LGPL"
Code HTML de l'exemple 4
<a href="http://ljouanneau.com/softs/javascript/tooltip.php" title="cette licence permet de construire un code propriétaire à partir d'outils open sources">javascript sous "licence LGPL"</a>
zecyb.org : formation informatique, développement et administration de sites
déclaration à la CNIL : n° 1397076