Les bulles d'info au passage de la souris
Afin d'éviter la répétitivité de textes longs et les remplacer par des photos, dessins ou logos, il peut être utile d'installer sur certaines pages un petit script bien pratique.
Quel est son utilité ? Tout simplement déclencher une bulle (je devrais dire un cadre) d'information au passage de la souris sur un endroit précis de la page.
Cette information dira au visiteur si c'est bien sur cet emplacement qu'il doit cliquer pour effectuer une recherche.
Le résultat : un gain de place et, pourquoi pas, une approche plus conviviale des "barres de navigation" trop souvent ternes, manquant de fantaisie.
Dans la pratique, de quoi s'agit-il ? Ci-dessous, vous trouverez 2 images ; passez-y votre souris :
Attention : si vous cliquez sur le lien, cliquez ensuite sur "page précédente" de votre navigateur afin de revenir ici : la leçon n'est pas terminée !
 passez votre souris ! |
L'image utilisée peut être
animée ou non  |
passez votre souris !  |
Un texte s'affiche : il correspond à l'évènement que déclencherait le clic de la souris. Le lien devra donc correspondre à l'évènement affiché dans la "bulle".
Comment faire ? En insérant (dans le code source) simplement le script repris ci-dessous :
|
<P><A HREF="page.htm"><IMG SRC="image.gif" ALT="Aller dans cette page" WIDTH=60 HEIGHT=100 BORDER=0 ALIGN=bottom></A> <A HREF="autrepage.htm"><IMG SRC="image.jpg" ALT="Aller dans cette autre page" WIDTH=130 HEIGHT=80 BORDER=0 ALIGN=bottom></A></P> |
Les variables écrites en bleu correspondent à la page de destination tandis que celles en rouge, vous l'aurez parfaitement compris, correspondent aux images insérées pour provoquer cet évènement. Celles écrites en vert correspondent évidemment au texte que vous désirez voir afficher dans la bulle.
Il vous restera à régler WIDTH et HEIGHT qui correspondent à la dimension que vous voulez donner aux images tandis que BORDER=0 évite l'encadrement de celles-ci.
Tout cela c'est bien, vous direz-vous. Mais pourquoi ne pas utiliser cette méthode afin, tout simplement, d'appliquer une définition à une photo, une image, un dessin ou un graphique ? Très facile :
Passez votre souris : elle provoquera l'affichage du texte que vous aurez écrit. Soit dit en passant, la bulle vous donne ici un texte fantaisiste : ce n'est malheureusement pas mon humble demeure ...
Le script ci-dessous suffit. Vous aurez constaté que seule la variable de lien a disparu, de même naturellement que la variable BORDER qui lui est associée. Résultat : vous obtenez le même effet mais la souris affichera une flèche sur l'image et non une main comme pour un lien.
|
<IMG SRC="image.gif" ALT="Légende de l'image" WIDTH=100 HEIGHT=100 ALIGN=bottom> |
Attention toutefois : l'attribut "ALT" doit être obligatoirement installé dans chaque balise <IMG> si l'on veut être parfaitement "valide" selon les normes du W3C : elle permet d'obtenir l'affichage de ce texte pour les navigateurs ne téléchargeant pas les images. Cette méthode d'affichage d'une bulle de texte avec "ALT" ne fonctionne qu'avec les navigateurs Internet Explorer. Pour tous les autres, l'attribut "TITLE" produira le même effet. Il est donc conseillé d'utiliser les deux attributs.
A vous de jouer !
