Image Maps

Tom Kelliher, CS297

Jan. 17, 1997

Outline:

1. Must leave early today; won't be here tomorrow (lab will be open).

2. Evaluation on Friday.

3. Start publishing your pages so that you're not stuck Thursday night/Friday morning.

4. A few words on image maps.

5. Hands-on exercise.

6. Return quizzes.

Image Maps

1. Idea: ``hot areas'' in image linked to URLs.

2. Sadly, Map This! won't work in the lab.

3. Creating image maps manually:
   1. Insert image in page.

   2. Take measurements for ``hot areas.''

   3. Use notepad to create image map in page.

   4. Link image to map using a target from image to map.

Example of HTML source:

<center><p>
<img usemap="#wcbannermap" src="WCBANNER.GIF" border=0>

<map name="wcbannermap">
<area shape=rect coords="202,110,278,150"
href="http://www.westminster.edu/">
<area shape=circle coords="288,58,10"
href="http://keystone.westminster.edu/~kelliher/">
<area shape=circle coords="302,84,10"
href="http://www.intel.com/">
<area shape=circle coords="338,66,10"
href="http://www.netscape.com/">
</map>

</p></center>

1. Using Paint Shop Pro for taking measurements: rectangles and circles.

2. How does it look in the browser?