Réaliser
des "bulles d'aide" en Javascript
Nous nous proposons
de réaliser un petit Javascript qui nous permette,
quand la souris survole un lien, d'afficher sous forme de fenêtre
"pop-up" une "bulle d'aide" contextuelle. Pour
cela, nous allons définir un objet bulle dont le constructeur
aura cette forme:
function bulle(nom, msg, largeur, hauteur,
couleur) {...}
L'argument "nom" désigne
le titre de la fenêtre "pop-op", l'argument "msg"
le message qui y apparaîtra, les arguments "largeur"
et "hauteur" ses dimensions et, enfin, l'argument "couleur"
sa couleur de fond.
Nous définirons une largeur, une hauteur et une couleur de
fond par défaut, ce qui nous dispense de préciser
les trois derniers arguments.
Notre objet devra comporter (sous forme d'attributs), un pointeur
sur un objet "fenêtre" (afin d'accéder aux
méthodes d'ouverture, de fermeture, etc. d'une fenêtre),
et un pointeur sur une "durée" (la durée
après laquelle s'affichera la fenêtre depuis l'instant
où l'événement onMouseOver est intercepté).
Nous utiliserons la fonction setTimeout() pour régler
cette durée. Cette fonction prend en argument un objet (ici
la fonction d'affichage de la fenêtre) et un entier (la durée
voulue en millisecondes), et renvoie un pointeur (le pointeur voulu).
Ainsi, nous définirons bulle() comme suit:
function bulle(nom, msg, largeur, hauteur,
couleur) {
this.nom = nom;
this.msg = msg;
this.duree = null;
this.fenetre = null;
this.LARGEUR = 300;
this.HAUTEUR = 200;
this.COULEUR = "#FFFFFF";
this.DUREE = 100;
if (largeur) this.largeur = largeur;
else this.largeur = this.LARGEUR;
if (hauteur) this.hauteur = hauteur;
else this.hauteur = this.HAUTEUR;
if (couleur) this.couleur = couleur;
else this.couleur = this.COULEUR;
return this;
}
et trois méthodes associées aux objets formés
à partir de cette fonction: debutAide(), afficherAide()
et finAide(). La première est chargée de "régler"
la durée, comme suit:
function debutAide() {
var temp="top." + this.nom + ".afficherAide()";
this.duree = setTimeout(temp, this.DUREE);
}
La seconde affiche la fenêtre, s'il y a lieu de le faire (si
ce n'est pas déjà fait) si l'événement
onMouseOver est intercepté:
function afficherAide() {
if (!this.fenetre || !this.fenetre.name || this.fenetre.name=="")
this.fenetre = window.open(
"",
"subWindow",
"toolbar=no,"
+
"location=no,"
+
"directories=no,"
+
"status=no,"
+
"menubar=no,"
+
"scrollbars=no,"
+
"resizable=no,"
+
"width="
+ this.largeur + "," +
"height="
+ this.hauteur);
else
this.fenetre.focus();
this.fenetre.document.open();
var temp= "<HTML><BODY BGCOLOR='"
+ this.couleur + "'><P>" + message + "</BODY></HTML>";
this.fenetre.document.write(temp);
this.fenetre.document.close();
}
et la troisième ferme cette fenêtre lorsque l'événement
onMouseOut est intercepté:.
function finAide() {
clearTimeout(this.duree);
if (this.fenetre && this.fenetre.name) {
this.fenetre.close();
this.fenetre=null;
}
}
Il nous reste alors à associer ces méthodes
à notre "classe" bulle, par l'intermédiaire
d'un objet "prototype":
new bulle();
bulle.prototype.debutAide = debutAide;
bulle.prototype.afficherAide = afficherAide;
bulle.prototype.finAide = finAide;
Et nous pourrons déclarer notre objet proprement dit, que
nous appellerons par exemple "mabulle":
var message="texte du message";
var mabulle = new bulle("mabulle", msg, 300, 200, "#FFFFFF");
Il est important que le nom de l'objet
soit identique au titre de la fenêtre, car nous utilisons
celui-ci pour identifier notre objet dans la fonction debutAide
(var temp="top." + this.nom
+ ".afficherAide()").
La dernière étape consiste à
produire le code HTML associant le passage de la souris sur un lien
à notre script.
[Jérôme
Morlon 13
mars 2001 , JDNet]
|
