Exercice HTML : Imagemaps

Thème

Réalisation d' "imagemaps", c'est-à-dire d'images clickables ("hyper-images" ou images actives, basées sur images GIF ou JPEG). Seule la technique des "client-side" imagemaps est abordée ici, c'est-à-dire les imagemaps entièrement définies dans la page HTML et interprétées au niveau du client (browser) (par oposition aux "server-side" imagemaps, en voie de disparition, définies au niveau du serveur). La technique des imagemaps est courammenent utilisée pour définir des interfaces-utilisateurs graphiques sur le Web (barres de navigation...).

Pour fabriquer la "MAP" de l'image (définition des zones sensibles par relève de coordonnées) on fait généralement usage de logiciels auxiliaires tels que, sous Windows, le shareware "LiveImage" ou son prédécesseur freeware "MapTHIS! 1.2". On peut aussi relever ces coordonnées par des logiciels de dessin-raster classiques tels que "PaintShop Pro" sous Windows, "XV" sous Unix, etc...

Remarque : les client-side imagemaps sont supportées à partir des versions de browsers Netscape 3 et IExplorer 3

Balises

Références

Donnée de l'exercice

Réaliser manuellement l'imagemap ci-dessous : Puis faites de même avec l'application freeware "MapThis".

Corrigé de l'exercice

Méthode manuelle

Relevé des coordonnées des zones sensibles de l'image :

ZoneTypeCoordonnéesLien
Bâtiment PolydômeCIRCLEcentre (413,248) rayon 34polydome.html
Texte "Polydôme"RECTangles (363,180) (454,201)polydome.html
Texte "Génie Civil"RECTangles (12,23) (69,64)http://dgcwww.epfl.ch/
Texte "Génie Rural"RECTangles (183,118) (240,162)http://dgrwww.epfl.ch/
Bâtiment Génie RuralPOLYangles (159,160) (203,184) (276,142) (328,176) (202,251) (108,193)http://dgrwww.epfl.ch/
Reste de l'imageDEFAULT(toute l'image)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

 EtapeSolution
1 Création du fichier HTML contenant le code de l'imagemap, et désignation de l'image Lancer MapThis, puis File>New : définition fichier image avec [Let's go find one] et désigner "dgr_map.gif" [Ouvrir]
2 Définition des zones sensibles :
rectangles, cercles/ellipses, polygones
Avec les outils respectifs suivants :
   [Define Rectangle area]
   [Define Circle/Oval area]
   [Define Polygon area] (fermer polygone avec <droite>)
3 Affectation des URLs aux zones sensibles 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 définition de priorité (si des zones se superposent) avec [Up] ou [Down]
4 Sauvegarder le code HTML de l'imagemap Faire File>Save as, et définir :
   - Enregistrer sous : format "HTML files"
   - Nom fichier : p.ex. "map.html"
   - File format : CSIM (client side imagemap)
   - [Map Info] (ou aprés coup avec Edit>Map Info) :
  • Titre : map_name
  • Author : ...
  • Default URL : URL par défaut
  • Description : ...
  • Map file format : CSIM (client side imagemap)
   - et [Enregistrer]
5 Insérer l'image proprement dite dans le code HTML de l'imagemap,
puis tester 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 dans votre browser et cliquer dans zones sensibles de l'image
6 Edition après coup de l'imagemap Ouvrir le fichier "map.html" dans MapThis avec File>Open


Exercices HTML © J.-D. Bonjour / SI-DGR, EPFL / Révision 25.2.98