Retrouvez cet article dans : Linux Pratique 40

Dans le numéro 38 de Linux Pratique, nous avons vu comment personnaliser des infobulles grâce aux CSS. Aujourd'hui, nous allons aborder une nouvelle méthode, basée sur Javascript et PHP. OverLIB est une bibliothèque Javascript créée par Erik Bosrup, qui permet de faire apparaître des pop-ups (ou infobulles) au survol de certains mots de votre page Web. Nous allons mettre en place un petit script en PHP qui va interagir avec cette bibliothèque.

Interprétation de la fonction mise en jeu

Observez le script suivant : La bibliothèque OverLIB est à récupérer sur le site de son créateur, Erik Bosrup (http://www.bosrup.com/web/overlib/, rubrique Download). Vous obtenez une archive nommée overlib421.zip (421 correspondant au numéro de la version disponible au jour de rédaction de l'article). Déplacez, puis décompressez cette archive sur votre serveur Web.

Dans votre navigateur, ouvrez la page http://www.votre_site.com/popup.php Vous devriez voir apparaître la phrase " Comment créer des pop-ups, etc. ". Le terme " pop-up " apparaît comme un lien hypertexte ; approchez la souris dessus : le pop-up apparaît immédiatement (Fig. 1) La fonction mise en jeu, nommée ici popup(), reçoit en arguments 1) le terme (ou l'expression) concerné(e) par le popup, 2) le texte contenu dans le pop-up. Ce qui correspond respectivement aux variables $text et $popup. La fonction comporte une déclaration de lien hypertexte, dans laquelle sont décrites :

• La cible du lien : javascript:void(0);. Ceci est bien sûr optionnel (cette mention évite au navigateur de charger une nouvelle page lorsque l'on clique sur le lien). Vous pouvez indiquer ici une URL.
• L'action à effectuer au survol de la souris (onMouseOver) : il s'agira de retourner le résultat de la fonction overlib(), recevant en argument le texte du pop-up.
• L'action à effectuer lorsque la souris ne survole plus le lien (onMouseOut) : il s'agira de retourner le résultat de la fonction nd() (dont le rôle est de faire disparaître le pop-up lorsque la souris n'est plus sur le lien). Vous pouvez éventuellement ajouter un argument temporel à cette fonction (un nombre de millisecondes ; le pop-up ne disparaîtra qu'après ce délai. Exemple : onMouseOut="return nd(3000); ")

Elle comporte enfin une instruction echo(), qui affiche le terme concerné par le pop-up. Suit le code HTML de la page Web. Dans l'en-tête se trouve, bien entendu, une mention permettant d'indiquer quel est le script Javascript mis en jeu et où il se trouve. Notez, entre les balises <script>, que verlib.js fait référence à la bibliothèque Javascript utilisée. Il faudra donc modifier le chemin vers ce script selon l'endroit où vous avez enregistré le script. L'élément <div> d'identifiant overDiv correspond au conteneur du pop-up. Quelques mentions de style sont d'ailleurs intégrées à cette balise : la mention position:absolute; permet de placer la boîte du pop-up en dehors du flux, de manière à ne pas perturber le reste du texte. La mention visibility:hidden; permet, quant à elle, de masquer le pop-up tant que la fonction n'est pas exécutée. Enfin, z-index:100; permet de s'assurer que le pop-up se positionnera toujours au premier plan par rapport au contenu de la page. Vous pouvez bien entendu ajouter des propriétés que vous jugerez utiles pour vos besoins personnels : la propriété border, par exemple, vous permettra de modifier la bordure du conteneur. Attention, overDiv ne correspond qu'au conteneur et non au pop-up lui-même. Ce n'est donc pas ici que vous pourrez éventuellement modifier la famille de police et sa couleur, la couleur d'arrière-plan ou encore les dimensions du pop-up. Pour cela, il vous faudra éditer le fichier overlib.js directement (voir paragraphe suivant). Remarquez enfin que la fonction popup() est appelée à l'endroit exact où se trouve le terme à définir (ici au sein d'un paragraphe <p>). Elle reçoit en arguments 1) le terme (ou l'expression) concerné par le pop-up, 2) le texte contenu dans le pop-up. Ces deux arguments sont séparés par une virgule et chacun d'eux est noté entre cotes.

Mise en forme et ajout d'une image

Comme précisé plus haut, pour modifier l'apparence du pop-up, il est nécessaire d'éditer le fichier overlib.js. C'est la partie " DEFAULT CONFIGURATION " du fichier qui nous intéresse. Là se trouvent tous les paramètres de style que vous pouvez modifier. Les différentes instructions concernant le format sont de cette forme : Cette ligne, par exemple, signifie que la couleur du texte du pop-up est fixée à #000000 (couleur noir). Vous pouvez donc modifier la couleur du texte en changeant ce code couleur. À titre d'information, voici à quoi correspondent certaines des variables utilisées (celles que vous serez sûrement amené à modifier en priorité) :

• ol_fgcolor : couleur de contour de la fenêtre pop-up ;
• ol_bgcolor : couleur de l'arrière-plan de la fenêtre pop-up ;
• ol_textcolor : couleur du texte du pop-up ;
• ol_textfont : famille de police ;
• ol_textsize : taille du texte ;
• ol_border : épaisseur de la bordure du pop-up ;
• ol_cellpad : épaisseur des marges intérieures du pop-up ;
• ol_width : largeur du pop-up ;

Avec nos propres paramètres, nous obtenons le résultat illustré par la figure 2.

La fenêtre du pop-up peut contenir toutes sortes d'informations, y compris des tableaux, des images, etc. Nous allons, par exemple, ajouter une image au texte contenu dans le pop-up (Fig. 3, page suivante) :

Remarquez l'utilisation de l'entité " en guise de guillemets : ceci est très important. Si vous ne l'utilisez pas, votre pop-up sera mal interprété par le script. De même, si vous devez utiliser de simples guillemets (ou cotes '), veillez à les faire précéder d'un \ pour qu'ils ne soient pas interprétés par la fonction (les deux arguments étant eux-mêmes placés entre cotes). Nous en avons profité pour changer un peu le style du texte. Les mots " Nom scientifique " et " Famille " ont été mis en évidence (gras et souligné) grâce à l'insertion d'une classe spécifique, définie dans l'en-tête du fichier PHP : Remarquez que nous avons regroupé ici toutes les mentions de style, y compris les propriétés définies pour le conteneur (qui étaient, à l'origine, incluses directement dans la balise). La ligne qui décrit le conteneur devient <div id="overDiv"></div>. À vous maintenant d'adapter ces pop-ups selon vos besoins...

Retrouvez cet article dans : Linux Pratique 40