Image maps

Link here to the files that we generated in class

Remember this:

Have a look at the map that Steve Reynolds has developed by viewing the page source on this page:
The basic point is that you define a series of zones on the image and those zones correspond to links (that is called the map). Then when you display the image, you tell the browser the name of the map that you will use:
Define map:
<MAP NAME="azrelief" WIDTH=400 HEIGHT=480>
<AREA shape="poly" coords=" 102,1, 60,94, 217,177, 221,215 ,403,283 ,402,1, 102,1 " href="az_northern/azn_relief.htm ">
<AREA shape="poly" coords=" 8,74, 57,0 ,102,1, 60,94,99,220, 34,227, 9,74, 8,74" href="az_northern/aznw_relief.htm ">
<AREA shape="poly" coords=" 63,93, 99,219, 405,353, 404,283 ,221,216, 216,177, 60,93, 63,93 " href="az_central/azc_relief.htm ">
<AREA shape="poly" coords=" 1,380,34,225, 99,219 ,404,351, 402,479, 259,477, 1,380" href="az_southern/azs_relief.htm ">

<IMG align=left SRC="azrelief_color_reduced.jpg" usemap="#azrelief">


As you might imagine, it would be tricky figuring out what the coordinates of those polygons might be.
George found ths nifty program called Webmap (from the software source called that will let you open up a *.gif or *.jpeg, define polygons, circles, or rectangles as spaces for links, and then save a map file that can be imported into alpha in the correct html format.
To run Webmap, look for it in the Caliente Public folder, in our glg490 folder.
Open an image file (*.gif or *.jpeg). before proceeding, make sure that in the edit menu->preferences, that Edit URL when marker is created is checked and that the file format is NCSA.
Then use the drawing tool to define the space that you want, type in the URL of the target when prompted, and carry on. When you are all done, save (this just saves the information in a part of the image file to help Webmap, but also export and a *.map file will be generated.
Once you are in Alpha, go to the html mode and find imagemaps and convert NCSA map (select your map file) that should set up the map definition.
Finally, remember to call your image like this:
<IMG SRC="azrelief_color_reduced.jpg" usemap="#azrelief">
and remember that the # sign is necessary before your map name if you have defined the map name within the same file.

Pages maintained by
Prof. Ramón Arrowsmith
Last modified November 21, 1997