Exercices HTML

www.rahmouni.ma

Imagemaps
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 "server-side" 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 dessinraster 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 : Dfinition imagemap :

<MAP NAME="map_name">

<IMG SRC="URL de l'image" USEMAP="#map_name" BORDER="nb.pixels">

<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>

Exercices HTML

www.rahmouni.ma

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 o reste de l'image : lien vers http://www.epfl.ch

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

Exercices HTML

www.rahmouni.ma

Corrig de l'exercice
Mthode manuelle Relev des coordonnes des zones sensibles de l'image :
Zone Btiment Polydme Texte "Polydme" Texte "Gnie Civil" Texte "Gnie Rural" Btiment Gnie Rural Reste de l'image Type CIRCLE RECT RECT RECT Coordonnes Lien centre (413,248) rayon polydome.html 34 angles (363,180) polydome.html (454,201) angles (12,23) (69,64) angles (183,118) (240,162) angles (159,160) (203,184) (276,142) (328,176) (202,251) (108,193) http://www.rahmouni.ma/ http://www.rahmouni.ma/

POLY

http://www.rahmouni.ma/

DEFAULT (toute l'image)

http://www.rahmouni.ma/

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 Dreameweaver

Etape Cration du fichier HTML contenant le 1 code de l'imagemap, et dsignation de l'image 2 Dfinition des zones Solution Lancer MapThis, puis File>New : dfinition fichier image avec [Let's go find one] et dsigner "dgr_map.gif" [Ouvrir] Avec les outils respectifs suivants :

Exercices HTML
sensibles : rectangles, cercles/ellipses, polygones
[Define Rectangle area] [Define Circle/Oval area] [Define Polygon area]

www.rahmouni.ma

(fermer polygone

Affectation des URLs aux zones sensibles

avec <droite>) 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) :

Sauvegarder le code HTML de l'imagemap

Titre : map_name Author : ... Default URL : URL par dfaut Description : ... Map file format : CSIM (client side imagemap)

- et [Enregistrer] Ajoutez manuellement dans votre fichier Insrer l'image proprement dite dans "map.html" la ligne : <IMG SRC="dgr_map.gif" le code HTML de USEMAP="#map_name" BORDER="0"> 5 l'imagemap, puis testez votre fichier "map.html" en puis tester l'ouvrant dans votre browser et cliquer dans l'imagemap zones sensibles de l'image 6 Edition aprs coup de Ouvrir le fichier "map.html" l'imagemap dans MapThis avec File>Open