mai
20
Des bulles infos bien sympas
Bon, en fait, vu que j’ai trouvé du temps, après les révisions de maths, ben vous avez droit à un tuto 
Il s’adresse aux codeurs (en herbes ou experts) HTML/CSS et JavaScript (éventuellement, si vous ne codez pas en JS, restez quand même !). On va faire un petit truc sympa : des bulles-infos en JavaScript, pour par exemple, afficher les liens de partage sur différents réseaux sociaux, ou une info sur un mot, ou encore afficher des infos sur un utilisateur (pratique sur les forums) …
Le JavaScript
Le code à copier, entre et :
/* -------CE SCRIPT PROVIENT DE http://damienalexandre.fr/Info-Bulle-en-Javascript.html ---------- */
function GetId(id)
{return document.getElementById(id);}
var i=false; // La variable i nous dit si la bulle est visible ou non
function move(e)
{
if(i)
{ // Si la bulle est visible, on calcul en temps reel sa position ideale
if (navigator.appName!="Microsoft Internet Explorer")
{ // Si on est pas sous IE
GetId("curseur").style.left=e.pageX + 5+"px";
GetId("curseur").style.top=e.pageY + 10+"px";
}
else
{
if(document.documentElement.clientWidth>0)
{
GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px";
GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px";
}
else {
GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px";
GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px";
}
}
}
}
function montre(text)
{
if(i==false)
{
GetId("curseur").style.visibility="visible"; // Si il est caché (la verif n'est qu'une securité) on le rend visible.
GetId("curseur").innerHTML = text; // on copie notre texte dans l'élément html
i=true;
}
}
function cache()
{
if(i==true)
{
GetId("curseur").style.visibility="hidden"; // Si la bulle est visible on la cache
i=false;
}
}
document.onmousemove=move; // dès que la souris bouge, on appelle la fonction move pour mettre à jour la position de la bulle.
Comment il marche ? Eh bien il y a trois fonctions, une fonction move(), qui s’occupe de la position de la souris.Une autre, montre(), qui est appelée lorsque la souris est sur l’élément HTML (en l’occurrence, le lien),puis une dernière fonction cache(), qui -tout logiquement- cache la bulle lorsque la souris n’est plus sur le lien.
Je parle d’un lien, mais il peut très bien s’agir de tout autre chose, genre une image, ou un titre. Il suffira juste de mettre les évènements Javascript dans la balise en question
L’HTML
Il faut ensuite écrire les évènements Javascript, et les fonctions qu’ils appellent.
Pour ceux qui ne connaissent pas trop Javascript, un évènement correspond à un attribut en HTML (par exemple onclick= »blablabla« ). Dans l’exemple, cet évènement exécutera le code Javascript lorsque la souris passera sur l’élément HTML.
Voici donc un exemple d’utilisation de l’info-bulle, avec un lien sur un mot, qui affichera sa définition :
<a href="#" onmouseover="montre('Ma définition<br/>Lorem ipsum concenator in lorum. Discipulum bonae sunt, praeceptoris in theatro sunt.');" onmouseout="cache();">Mon mot</a><div id="curseur"></div>
Oui, il n’y a rien dans le div, mais c’est normal. Il faut le laisser vide. Pourquoi ? Parce que. haha.
Non, c’est parce qu’en réalité, le code Javascript qui est dans la fonction montre() place le texte ici quand la souris est dessus.
Un peu de CSS
Passons maintenant à la mise en forme de notre bulle, qui ne ressemble à rien jusqu’ici. Je vous donne un exemple de mise en forme, qui donne ceci.
.tooltip {
margin: 8px;
width: 145px;
height: auto;
position: absolute;
visibility : hidden;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
border: 2px solid #4F8BE5;
font-family: Verdana, Arial;
color: #ffffff;
font-size: 82%;
background-color: #4F5EE5;}
.tooltip span{
padding: 0px 78px 3px 3px;
background-color: #4F8BE5;
height: 100%;
width: 145px;
font-size: 95%;
font-weight: bold;
}
.tooltip p{
padding: 2px 5px;
}
Voilà ! C’est fini ! Vous pouvez bien sûr personnaliser cette jolie bu-bulle ! Par exemple, au lieu que la bulle s’affiche quand la souris passe sur le lien, la bulle peut s’afficher quand on clique sur ce lien, et pour cela, il suffit de remplacer onmouseover par onclick, dans la balise a. Par la suite, modifiez le design, avec le CSS. La propriété margin, dans la première accolade, définit la position de la bulle par rapport à la souris. Dans mon exemple, elle sera décalée de 8px à partir de la gauche, et 8 autres pixels à partir du haut.
ATTENTION, ne supprimez pas la propriété position, très importante dans le système de l’info-bulle.
@ Bientôt
