L'assistant de création d’images en coordonnées est le troisième bouton dans l’onglet « Images » :

Voici la fenêtre qui sera alors ouverte :

Commencez par donner un nom à votre série de coordonnées, dans le premier champ en haut de la fenêtre. Ici, nous avons choisi le nom « Menu » :

Pour ce faire, cliquez sur le premier bouton de la fenêtre « Esquisse » (en bas) , afin d'appeler l'assistant d'images. Dans la boîte de dialogue, choisissez l'image image.gif. Une fois l'image sélectionnée, votre fenêtre ressemblera à celle-ci:

Maintenant, il faut définir les zones qui seront traitées dans l'image, ainsi que la destination où sera amené le visiteur lorsqu’il cliquera dans une de ces zones.

Commençons par la forme la plus simple : le rectangle.

Cliquez sur le deuxième bouton de la fenêtre « Esquisse » , soit le bouton utilisé pour la création de formes géométriques. Assurez-vous que la forme du rectangle est sélectionnée. Puis, placez le pointeur de votre souris sur le coin supérieur gauche du rectangle et cliquez une fois. Maintenez la pression sur le bouton de la souris et déplacez le pointeur vers le coin inférieur droit, puis relâchez le bouton. Vous verrez alors apparaître un cadre en pointillé autour du rectangle. Vous avez défini une zone. Vous pouvez la déplacer avec votre souris au besoin.

Maintenant, il faut indiquer où votre visiteur sera amené lorsqu'il cliquera sur cette zone de l'image. Cliquez sur le troisième bouton . Ajoutez la zone et sélectionnez « Lien externe ». Cette fonction ouvrira l'assistant pour le lien externe. Dans le cas présent, vous inscrirez simplement « pagec.html » dans le champ « Référence à un lien externe ». Cliquez ensuite sur OK. Vous verrez apparaître votre nouvelle zone dans la portion « Zones définies », juste au dessus de la fenêtre « Esquisse ».

Faisons maintenant le cercle. Commencez encore une fois par cliquer sur le bouton des formes géométriques , puis sélectionnez le cercle. Placez le pointeur de votre souris en haut à gauche du cercle rouge de l'image et déplacez le pointeur pour former un cercle de taille équivalente à celle du cercle rouge. Repositionnez le cercle en pointillé pour le mettre juste au-dessus du cercle rouge.

À présent, cliquez sur le bouton des coordonnées et choisissez un lien externe. Inscrivez simplement « pagea.html » dans le champ « Référence à un lien externe », puis cliquez sur OK. Vous verrez apparaître votre nouvelle zone dans la portion « Zones définies » juste au dessus de la fenêtre « Esquisse ».

Finalement, voyons comment définir une zone autour du triangle.

Pour définir une zone autour du triangle, il faut recourir à la forme du polygone. Dans les cas du rectangle et du cercle, nous sommes partis d'un point A et avons fait glisser le pointeur jusqu'à un point B, à l'opposé, afin de définir la zone désirée.

Dans le cas du polygone, l'approche est différente. Le polygone est utilisé pour définir les contours d'une forme irrégulière. Vous devez donc définir les points entre lesquels des lignes seront placées afin de former la zone. La forme est terminée lorsque vous cliquez sur un point qui est déjà inclus dans le contour de la forme.

Par exemple, pour le triangle, vous pourriez cliquer sur le sommet, puis passer par les deux coins inférieurs avant de revenir au sommet. Vous trouverez peut-être plus simple de commencer par le milieu d'un côté : il vous sera plus facile de faire le tour et de trouver une ligne sur laquelle vous êtes déjà passé. Pour établir les coordonnées, inscrivez un autre lien externe, que vous dirigerez vers la page « pageb.html ».

Une fois que vous aurez terminé, voici à quoi ressemblera alors votre fenêtre d’images en coordonnées :

Cliquez sur OK afin d'insérer le code dans votre page HTML. Votre code ressemblera à ceci:

En visionnant votre page Web, si vous faites glisser le pointeur de la souris au-dessus des trois formes géométriques, vous remarquerez qu’il se transforme en une main, indiquant qu’il s’agit, en fait, d’un lien et non d’une simple image.