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 !
animée ou non.
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>
A vous de jouer !