Image maps
Remember this:
Have a look at the map that Steve Reynolds has developed by viewing the
page source on this page:
http://www-glg.la.asu.edu/~sreynolds/azvt/azrelief_new.htm
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 ">
</MAP>
<IMG align=left SRC="azrelief_color_reduced.jpg" usemap="#azrelief">
Webmap
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 Shareware.com) 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