Thme

Ralisation d' "imagemaps", c'est--dire d'images clickables ("hyper-images" ou

images actives, bases sur images GIF ou JPEG). Seule la technique des "client-side"
imagemaps est aborde ici, c'est--dire les imagemaps entirement dfinies dans la
page HTML et interprtes au niveau du client (browser) (par oposition aux "serverside" imagemaps, en voie de disparition, dfinies au niveau du serveur). La technique
des imagemaps est courammenent utilise pour dfinir des interfaces-utilisateurs
graphiques sur le Web (barres de navigation...).
Pour fabriquer la "MAP" de l'image (dfinition des zones sensibles par relve de
coordonnes) on fait gnralement usage de logiciels auxiliaires tels que, sous
Windows, le shareware "LiveImage" ou son prdcesseur freeware "MapTHIS! 1.2".
On peut aussi relever ces coordonnes par des logiciels de dessin-raster classiques tels
que "PaintShop Pro" sous Windows, "XV" sous Unix, etc...
Remarque : les client-side imagemaps sont supportes partir des versions de
browsers Netscape 3 et IExplorer 3

Balises

Insertion image dans page : <IMG SRC="URL de l'image"

USEMAP="#map_name" BORDER="nb.pixels">

Dfinition imagemap :
<MAP NAME="map_name">
<AREA SHAPE=CIRCLE COORDS="x_centre,y_centre,rayon"
HREF="URL">
<AREA SHAPE=RECT
COORDS="x_hautgauche,y_hautgauche,x_basdroite,y_basdroite"
HREF="URL">
<AREA SHAPE=POLY COORDS="x1,y1,x2,y2,...,xn,yn" HREF="URL">
<AREA SHAPE=DEFAULT HREF="URL">
</MAP>

Rfrences

Article FI-EPFL "Client-side Imagemaps"

Donne de l'exercice
Raliser manuellement l'imagemap ci-dessous :
rcuprez, dans votre rpertoire, l'image "dgr_map.gif" se trouvant dans
R:\Si-dgr\Internet

placez-la en image en-ligne dans une page HTML, et dfinissez dans cette
page des liens sur les zones sensibles (entoures de rouge) suivantes en
relevant les coordonnes avec l'application "PaintShop Pro" sous Windows :
o texte et btiment Polydme : lien vers un fichier polydome.html
o texte Gnie Civil : lien vers http://dgcwww.epfl.ch
o texte et btiment Gnie Civil : lien vers http://dgrwww.epfl.ch

reste de l'image : lien vers http://www.epfl.ch

Puis faites de mme avec l'application freeware "MapThis".

Corrig de l'exercice
Mthode manuelle
Relev des coordonnes des zones sensibles de l'image :
Zone

Type

Btiment
Polydme

CIRCLE

centre (413,248) rayon 34

polydome.html

Texte
"Polydme"

RECT

angles (363,180) (454,201)

polydome.html

Texte "Gnie
Civil"

RECT

angles (12,23) (69,64)

http://dgcwww.epfl.ch/

Texte "Gnie
Rural"

RECT

angles (183,118) (240,162)

http://dgrwww.epfl.ch/

angles (159,160) (203,184)

(276,142) (328,176) (202,251)
(108,193)

http://dgrwww.epfl.ch/

Btiment Gnie
POLY
Rural
Reste de
l'image

Coordonnes

DEFAULT (toute l'image)

Lien

http://www.epfl.ch/

ce qui donne le code HTML suivant :

<CENTER><IMG SRC="dgr_map.gif" USEMAP="#map_dgr"
BORDER="0"></CENTER>
<MAP NAME="map_dgr">
<AREA SHAPE=CIRCLE COORDS="413,248,34" HREF="polydome.html">

<AREA SHAPE=RECT COORDS="363,180,454,201"

HREF="polydome.html">
<AREA SHAPE=RECT COORDS="12,23,69,64"
HREF="http://dgcwww.epfl.ch/">
<AREA SHAPE=RECT COORDS="183,118,240,162"
HREF="http://dgrwww.epfl.ch/">
<AREA SHAPE=POLY
COORDS="159,160,203,184,276,142,328,176,202,251,108,193"
HREF="http://dgrwww.epfl.ch/">
<AREA SHAPE=DEFAULT HREF="http://www.epfl.ch/">
</MAP>

Avec l'application MapThis

Etape

Solution

Cration du fichier
Lancer MapThis, puis File>New : dfinition fichier
HTML contenant le code
image avec [Let's go find one] et dsigner
1
de l'imagemap, et
"dgr_map.gif" [Ouvrir]
dsignation de l'image
Dfinition des zones
sensibles :
2 rectangles,
cercles/ellipses,
polygones

Affectation des URLs

aux zones sensibles

Sauvegarder le code
HTML de l'imagemap

Avec les outils respectifs suivants :

[Define Rectangle area]
[Define Circle/Oval area]
[Define Polygon area] (fermer
<droite>)

polygone avec

Faire View>Area List ou outil [Show/Hide area

list], puis, pour chaque zone :
- double-clic ou [Edit] sur libell de la zone
- et introduction de l'URL (et ventuel
commentaire)
et ventuelle dfinition de priorit (si des zones se
superposent) avec [Up] ou [Down]
Faire File>Save as, et dfinir :
- Enregistrer sous : format "HTML files"
- Nom fichier : p.ex. "map.html"
- File format : CSIM (client side imagemap)
- [Map Info] (ou aprs coup avec Edit>Map
Info) :
Titre : map_name
Author : ...
Default URL : URL par dfaut
Description : ...
Map file format : CSIM (client side
imagemap)
- et [Enregistrer]

5 Insrer l'image
proprement dite dans le
code HTML de
l'imagemap,

Ajoutez manuellement dans votre fichier

"map.html" la ligne :
<IMG SRC="dgr_map.gif"
USEMAP="#map_name" BORDER="0">
puis testez votre fichier "map.html" en l'ouvrant

puis tester l'imagemap

dans votre browser et cliquer dans zones sensibles

de l'image

Edition aprs coup de

l'imagemap

Ouvrir le fichier "map.html" dans MapThis avec

File>Open