Image en coordonnées

Suite à notre précédente chronique, nous continuons donc à parler de graphiques…

Quelques petites astuces intéressantes peuvent particulièrement nous intéresser.

En premier lieu, celle de la distance horizontale ou verticale par rapport à une puce par exemple ! Je place une puce dans un de mes menus mais je constate que celle-ci colle au texte ? Une solution serait de placer celle-ci, ainsi que le texte dans un tableau, et moyennant des dimensions précises quant à la largeur des colonnes, je pourrais séparer la puce du texte se trouvant juste à côté ! Mais il y a une solution plus simple, celle des attributs HSPACE et VSPACE.

WebExpert vous permet de choisir exactement comment placer vos images par rapport à la ligne de texte et comment le texte suivant ainsi que les lignes précédentes vont se trouver vis à vis de cette image.

Voici d'abord la fenêtre nécessaire à l'incorporation de l'image :

Cette fenêtre est obtenue, pour rappel, en cliquant sur le bouton "Image"    de l'onglet "Spécialisés".

Comme vous le constatez, il y a plusieurs boîtes de texte correspondantes aux divers choix qui vous sont possibles (j'ai repris certains texte de l'aide en ligne de WebExpert, pour vous montrer que celle-ci est très bien faite et mérite d'être lue…).

• Le nom du fichier (balllem.gif)
  
• Le path de l'image est laissé, dans cet exemple, car sur le serveur, les images sont placées aussi dans un dossier "images" : ../images/balllem.gif
  

• La boîte texte " Alternative ": "dans cette boîte, vous pouvez inscrire du texte qui décrit l'image. Ce texte apparaîtra à la place de l'image si votre navigateur ne peut l'afficher ou si vous interrompez son transfert. Cette option ajoutera l'attribut ALT à la commande <IMG> : depuis les versions 4.x, vous pouvez également voir la petite bulle explicative donnée par l'attribut ALT par Netscape !

  ---

  À ce propos, je vous signale également une nouveauté d'IE4.0, à savoir la possibilité d'incorporer une petite bulle explicative, visible sur un simple lien, mais par l'attribut TITLE, avec la même synthaxe : Title="texte descriptif...". Vous incorporez cet attribut dans le code du lien... Voici un code exemple :

  
  <A HREF="#exemple" Title="Pour retourner de quelques lignes en arrière..."> Lien interne</A> Lien interne

---




• Au bas, au milieu, en haut : "sélectionnez l'alignement désiré de l'image par rapport à la ligne de texte en cliquant sur l'un des trois boutons radio. Vous pouvez modifier l'alignement de l'image pour qu'elle soit en haut ou au milieu. La valeur par défaut est en bas. Ceci aura pour effet d'insérer l'attribut ALIGN="TOP ou MIDDLE" à la commande <IMG> : (Visicom Media, aide en ligne)"

• Ce qui est beaucoup moins connu, ce sont les options d'espacement vertical ou horizontal de l'image : celles-ci vous permettent de faire en sorte que le texte qui suit l'image soit plus loin ou non de l'image (espacement horizontal) et les lignes entourant l'image (vertical) : donc, pour espacer le texte suivant la puce, il suffit de choisir une dimension dans la boîte de dialogue "Espacement horizontal" : notre problème est résolu…

Une autre possibilité pour vos images est de créer des "images en coordonnées" ? De quoi s'agit-il ?

En fait, certains Webmaster préfèrent, plutôt que de mettre des liens séparés, placer une image principale avec la possibilité de cliquer sur certaines parties de l'image, parties qui nous permettent de charger d'autres pages…

Celle-ci est un exemple simple pour vous expliquer en quoi consiste une image "MAP" : simple, car les différentes parties de l'image sont facilement discernables. Le procédé est le même pour des images plus compliquées…

Plutôt que de mettre un menu, correspondant aux divers liens vers les pages "Liens", "Formulaire", "Download" et "Bannières", nous pouvons placer celle-ci dans notre page d'accueil et créer une image "MAP" qui va permettre, par un simple clic sur les différentes parties de l'image (qui décrivent bien ce à quoi elles correspondent) de se rendre dans les pages concernées.

Nous devons incorporer cette image par un autre bouton que le précédent, celui-ci étant placé directement à côté du bouton "Image" dont nous venons de parler. Celui-ci s'appelle "Image en cordonnées" .

Après un clic sur ce bouton, vous devez choisir l'image à incorporer, et vous remarquez que le bouton sur lequel il faut cliquer est identique (choisissez images avec paramètres) :

La fenêtre proposée ensuite est la même que pour l'insertion d'une image : vous choisissez celle qui va représenter votre menu, dans mon exemple, c'est le fichier "site.gif".

Première étape :  

Cliquez en premier lieu sur le bouton "Forme géométrique" . Un choix vous est proposé, à savoir : Rectangle - Cercle - Polygone. 
Choisissez, pour cet exemple, le choix "Rectangle . 
En effet, les images "sensitives" ou "images-liens" de notre fichier "site.gif" sont des rectangles. Les autres choix vous serviront pour des situations plus complexes où un simple rectangle ne conviendra pas. Vous pouvez "mélanger" les choix sans aucun problème...

Entourer avec votre souris la première partie de l'image qui va constituer le premier lien et cliquer ensuite sur le bouton "ajouter la zone". Vous pouvez choisir des zones rectangulaires, circulaires ou polygones : dans notre cas, nous allons employer celle (rectangle) qui est proposée par défaut puisqu'elle nous convient parfaitement.

Vous pouvez ajuster la zone avec votre souris : dans l'image ci-dessus, un rectangle trop grand a été créé pour des raisons pratiques de visusalisation. Avec la souris, on ajuste la zone...

Deuxième étape :  

Maintenant que la zone "sensitive" correspond exactement à vos souhaits, il faut la rendre opérationnelle : pour cela, cliquez sur le bouton "Ajouter la zone" : et choisissez, par exemple "Lien externe". Cela pourrait être un lien interne ou pas de lien.

Vous obtenez ainsi la fenêtre suivante. Dans notre cas, ce sera un lien externe puisque nous voulons atteindre index.html (ici, c'est pour l'exemple, dans le cas où vous feriez une page de menu. En effet, si vous voulez employer ce menu à partir de la page index, ignorez ce premier lien, puisque vous vous trouvez déjà dans la page d'accueil "index.html").

Vous retrouvez ainsi la fenêtre des liens… Vous choisissez la page vers laquelle vous voulez aller par le lien, dans l'exemple ci-dessous, c'est "index.html". Indiquez ici le contenu de la bulle explicative (astuce Internet Explorer, non visible pour Netscape actuellement), qui sera montrée lorsque le pointeur de la souris sera situé sur la zone-liens : "Page d'accueil"

Cette page étant choisie, cliquez sur OK et vous constatez que la ligne de code est générée automatiquement par WebExpert ainsi que la zone qui est entourée par un rectangle rouge.

Entourez avec votre souris la seconde zone qui est proposée et qui se trouve au-dessus de la première (liens) : employez le clic gauche de la souris, que vous maintenez appuyé tout en déplaçant le rectangle (zone) sur la prochaine partie de l'image qui va constituer le second lien. Vous pouvez encore repositionner le rectangle en cliquant sur celui-ci et le curseur de la souris se changera en petite main ou par les poignées de redimensionnement. Si vous deviez, dans votre image, choisir une zone différente (cercle ou polygone), procédez de la même manière, mais en re-choisissant la zone adéquate, par le bouton "Forme géométrique" .

Ajustez donc la zone sur la partie de l'image et répétez la procédure décrite ci-dessus pour ajouter la page "liens.html" (ou une autre bien sûr) : la seconde zone est entourée de rouge également.

Si d'aventure, la page que vous désirez charger par le lien n'existe pas encore, WebExpert 2000 vous le signalera par une fenêtre d'avertissement :

Validez en cliquant sur le bouton "Oui" : vous la créerez ensuite...

Répétez l'opération pour la partie concernant le formulaire de votre site ("formulaire.html"), et ainsi de suite pour toutes les parties de l'image qui vont servir de lien. Ajustez les zones sur les parties de l'image en pensant à donner une zone la plus grande possible tout en veillant à ce que les zones ne se touchent pas (dans l'exemple, c'est assez facile à faire, mais ce ne sera pas toujours le cas pour d'autres images compliquées…)

Quand vous avez terminé toute les parties de l'image, vous devez encore donner un nom identificateur de l'image en coordonnées, dans notre exemple, j'ai choisi "menu". Vous obtenez ainsi la fenêtre suivante, et vous pouvez enfin cliquer sur OK.

Les codes insérés par WebExpert sont les suivants :

<MAP NAME="menu">
<AREA SHAPE="RECT" COORDS="184,0,309,43" HREF="accueil.html" TITLE="Pagedaccueil">
<AREA SHAPE="RECT" COORDS="0,92,89,131" HREF="liens.html">
<AREA SHAPE="RECT" COORDS="119,92,232,131" HREF="formulaire.htm" TITLE="Pournouscontacter">
<AREA SHAPE="RECT" COORDS="274,90,364,130" HREF="download.html" TITLE="Destelechargements">
<AREA SHAPE="RECT" COORDS="389,92,477,131" HREF="bannieres.html" TITLE="Quelquesbannieres">
</MAP>
<IMG SRC="site.gif" BORDER=0 WIDTH=477 HEIGHT=131 USEMAP="#menu">

Vous avez peut-être remarqué que l'attribut "TITLE" ne comprend ni espaces ni accents ? C'est un petit "bug" de WebExpert, qui sera rapidement réparé. Pensez donc à placer vous-mêmes les espaces et accents requis...

<MAP NAME="menu">
<AREA SHAPE="RECT" COORDS="184,0,309,43" HREF="accueil.html" TITLE="Page d'accueil">
<AREA SHAPE="RECT" COORDS="0,92,89,131" HREF="liens.html">
<AREA SHAPE="RECT" COORDS="119,92,232,131" HREF="formulaire.htm" TITLE="Pour nous contacter">
<AREA SHAPE="RECT" COORDS="274,90,364,130" HREF="download.html" TITLE="Des téléchargements">
<AREA SHAPE="RECT" COORDS="389,92,477,131" HREF="bannieres.html" TITLE="Quelques bannières">
</MAP>
<IMG SRC="site.gif" BORDER=0 WIDTH=477 HEIGHT=131 USEMAP="#menu">

Et voilà, c'est terminé : votre image en coordonnées est créée…

Nous allons terminer par insérer dans notre page d'accueil un lien vers notre adresse e-mail. Pour ce faire, vous tapez le texte qui va constituer votre lien, part exemple "Pour m'écrire…" ou choisissez une image (animation) qui va constituer votre lien : c'est cette dernière solution que j'ai choisie ici, mais la procédure est la même pour les deux cas.

En premier lieu, insérez votre image (l'animation que je vous propose est "ANIMLROUGE.GIF") dans la page, en-dessous de votre image en coordonnées : vous connaissez maintenant la procédure à suivre (bouton "Image"   etc.).

Ensuite, vous sélectionnez l'entièreté du code de l'image et cliquez sur le bouton "Lien externe" de l'onglet "Spécialisés" , vous obtenez alors la fenêtre ci-dessous ! 

Choisissez l'option "mailto" qui correspond au code HTML qui va renvoyer vers votre e-mail (programme de mail) et écrivez, sans faute, votre adresse e-mail complète : dans notre exemple, j'ai laissé l' adresse fictive proposée par défaut par WebExpert 2000 : remplacez celle-ci par l'adresse appropriée. Vous remarquerez une petite fenêtre "sujet du courrier électronique" qui permet de donner automatiquement un sujet au message que vous recevrez du visiteur de votre site : ainsi, vous savez de suite pour quel motif on vous écrit. Notez que cette option ne fonctionne pas pour les navigateurs plus anciens.

<A HREF="mailto:email@adresse.com?subject=Pour nous écrire...">
<IMG SRC="ANIMLROUGE.GIF" BORDER=0 WIDTH=60 HEIGHT=43>
</A>

Pour terminer

Nous allons centrer nos images (en coordonnées (menu) et e-mail) et dans la même manipulation, intégrer un paragraphe. Pour cela, sélectionnez à chaque fois l'entièreté du code et cliquez sur le bouton "Paragraphe", de l'onglet "Communs". Comme nous désirons centrer les images, c'est l'option "centré" qu'il faut choisir.

Image en coordonnées :

<P ALIGN="center">
<MAP NAME="menu">
<AREA SHAPE="RECT" COORDS="184,0,309,43" HREF="accueil.html" TITLE="Page d'accueil">
<AREA SHAPE="RECT" COORDS="0,92,89,131" HREF="liens.html">
<AREA SHAPE="RECT" COORDS="119,92,232,131" HREF="formulaire.htm" TITLE="Pournouscontacter">
<AREA SHAPE="RECT" COORDS="274,90,364,130" HREF="download.html" TITLE="Destelechargements">
<AREA SHAPE="RECT" COORDS="389,92,477,131" HREF="bannieres.html" TITLE="Quelquesbannieres">
</MAP>
<IMG SRC="site.gif" BORDER=0 WIDTH=477 HEIGHT=131 USEMAP="#menu">
</P>

E-Mail :

<P ALIGN="center">
<A HREF="mailto:email@adresse.com?subject=Pour nous écrire..."><IMG SRC="ANIMLROUGE.GIF" BORDER=0 WIDTH=60 HEIGHT=43></A>
</P>

Voilà, c'est terminé et vous pouvez visionner le résultat terminé : résultat.

Enfin, si vous voulez télécharger le matériel de cette chronique, cliquez sur pagec7.zip.

Dans la prochaine chronique, nous verrons comment insérer un tableau et des retours vers notre page d'accueil… À bientôt.