(Article rédigé par un groupe d’étudiant d’IUT dans le cadre d’un projet tutoré)
Voici un tutorial qui permet lorsque l’utilisateur passe la souris au dessus d’un mot définie a préalable, d’afficher dans une bulle un texte, une image ou ce que l’on veut.
On peut ainsi utiliser ce principe pour donner la signification de certains mots, ou même pour un lien afficher dans la bulle la première phrase de la page cible du lien.
Dans cet exemple les mots et leur significations ce trouvent dans le fichier xml.
Voici le fichier html :
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”/ajax/bulle.css” media=”all” />
<script type=”text/javascript” src=”/ajax/bulles.js”></script>
</head>
<body>
<div id=”curseur”></div>
Mot :<br />
Connaissez vous l'<span onmouseover=”javascript:affbulle(this)” onmouseout=”javascript:cache()”>ajax</span> ?<br />
C’est un concept <span onmouseover=”javascript:affbulle(this)” onmouseout=”javascript:cache()”>informatique</span> !<br />
Retour à la ligne
</body>
</html>
Explication : On peut remarquer les balises <span>, ce sont elles qui vont nous servir pour récupérer le mot associé à la définition ;
Deux fonctions JavaScript vont être appelés :
-affbulle va servir pour charger la définition du mot et afficher la bulle lorsque le mot est survolé.
-cache va comme son nom l’indique masquer la bulle lorsque la souris ne se trouve plus sur le mot concerné.
On peut se demander a quoi va servir la balise <div>, c’est tout simplement la déclaration de la bulle.
Voici le fichier css associé :
.infobulle{
position: absolute;
visibility : hidden;
border: 1px solid Black;
padding: 10px;
font-family: Verdana, Arial;
font-size: 10px;
background-color: #FFFFCC;
}
.lienbulle{
color: #0000ff;
cursor: help;
text-decoration: underline;
}
Rien de particulier, infobulle concerne la bulle et lienbulle concerne le mot en question.
Voici maintenant le fichier xml :
<?xml version=”1.0″ ?>
<root>
<ajax>Texte correspondant a l’Ajax</ajax>
<informatique>Texte correspondant a l’informatique</informatique>
</root>
Il suffit de créer la balise <nom> (nom étant le mot qui va être décrit), puis entre cette balise ouvrante et la balise fermante, on placera la description qui apparaîtra dans la bulle
Attaquons nous maintenant au fichier JavaScript :
/*
Fonction qui crée un objet XHR.
Cette fonction initialisera la valeur dans la variable globale “requete”
*/
var requete = null; /* On crée une variable qui contiendra l’objet XHR */
function creerRequete() {
try {
requete = new XMLHttpRequest(); /* On essaye de créer un objet XmlHTTPRequest */
} catch (microsoft) {
/* Si cela ne marche pas, on a peut-être affaire à un navigateur de Microsoft. On tente alors de créer un objet ActiveX */
try {
requete = new ActiveXObject(‘Msxml2.XMLHTTP’);
} catch(autremicrosoft) {
/* Autre méthode si la première n’a pas marché */
try {
requete = new ActiveXObject(‘Microsoft.XMLHTTP’);
} catch(echec) {
/* Si aucune méthode ne fonctionne, on laisse l’objet vide*/
requete = null;
}
}
}
if(requete == null) {
alert(‘Votre navigateur ne semble pas supporter les objets XMLHttpRequest.’);
}
}
Pour l’instant, nous avons le même code que pour l’implémentation.
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 idéal
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”;
}
}
}
}
La fonction qui précède ce charge de la position de la bulle par rapport au curseur
function montre() {
if(i==false) {
GetId(“curseur”).style.visibility=”visible”; // Si elle est cachée (la verification n’est qu’une sécurité) on la rend visible.
i=true;
}
}
La fonction montre() va simplement rendre visible la bulle.
function cache() {
if(i==true) {
GetId(“curseur”).style.visibility=”hidden”; // Si la bulle est visible on la cache
i=false;
}
}
A l’inverse cache() va masquer la bulle.
function affbulle(src) {
/* On crée notre super objet XHR global */
creerRequete();
/* On édite les propriété de l’objet : type de paramètre, url (avec paramètres) et une option autorisant une réponse du serveur */
requete.open(‘GET’, ‘test.xml’, true);
/* On initialise la fonction de renvoi d’information */
requete.onreadystatechange = function() {
if(requete.readyState == 4) {
if(requete.status == 200) {
/* On récupère le contenu de notre fichier */
var xml = requete.responseXML;
document.getElementById(‘curseur’).innerHTML = xml.getElementsByTagName(src.innerHTML).item(0).firstChild.data;//c’est ici que l’on charge la définition du mot
}
}
}
/* C’est partit ! On envoi la requête XHR au serveur */
requete.send(null);
montre();
}
document.onmousemove=move; // dés que la souris bouge, on appelle la fonction move pour mettre à jour la position de la bulle.
Cette fonction va donc accéder au fichier xml et charger la définition du mot et la retourner au ‘curseur’ pour qu’il affiche le tout dans la bulle.
Le ‘src.innerHTML’ correspond au mot qui se trouve dans le fichier html entre les balises span, ce mot doit être identique a la balise du fichier xml contenant la définition, il servira par conséquent d’identifiant.