Manual Clickable Image Maps with Frames

Last Modified: 10/25/00

We will explain clickable image maps with frames with a specific example: a page with a left frame and a right frame. The left frame contains a GIF image which is divided into 3 regions: a left polygon, a right polygon, and a surrounding default region, such that when one region is clicked with the mouse an associated GIF image appears in the right frame. We need a total of 8 files for this specific example:

A GIF image associated with the 1st region: leftp.gif
A GIF image associated with the 2nd region: rightp.gif
A GIF image associated with the 3rd region: defp.gif
The GIF image in the left frame that contains the 3 regions: mymap.gif
An HTML file that defines the Frameset: frame_map.html. The file not only defines the frames but gives them a name (MAP1 and MAP2) so that the HTML file that defines the regions can use the TARGET parameter to direct the 3 GIF images to the correct frame.
An HTML file that defines the polygon regions in the map and targets where the 3 GIF image files will appear: frame_map1.html
An HTML file which contains the inital information to appear in the right frame: frame_map2.html
A home page HTML file index.html which must be modified to include the string
<A HREF="frame_map.html">clickable map</A>
(strictly speaking, we don't need the 8-th file since we could invoke "frame_map.html" directly from the browser, but in most cases it would be called from some other HTML file).

So, the only files you really need to construct are:

frame_map.html,
   frame_map1.html, frame_map2.html

. Only frame_map1.html is difficult to construct. These 3 files appear below:

<HTML><HEAD><TITLE>frame_map.html</TITLE></HEAD>
<FRAMESET COLS = "50%,*">
  <FRAME SRC = "frame_map1.html" NAME = "MAP1">
  <FRAME SRC = "frame_map2.html" NAME = "MAP2">
</FRAMESET>
</HTML>
---------------------------------------------------------------

<HTML><HEAD><TITLE>frame_map1.html</TITLE></HEAD>
<HR>
<IMG SRC="Image/mymap.gif" USEMAP="#shapes">
<MAP NAME = "shapes">
  <AREA SHAPE="POLY" COORDS= 
      "32,36 32,188 93,188 65,136 133,124 82,36" TARGET=MAP2
      HREF="Image/leftp.gif">
  <AREA SHAPE="POLY" COORDS=
      "93,188 245,188 244,36 82,36 133,124 65,136" TARGET=MAP2
      HREF="Image/rightp.gif">
  <AREA SHAPE="DEFAULT"  TARGET=MAP2 HREF="Image/defp.gif">
</MAP>
<P>
<HR> 
</HTML>
--------------------------------------------------------------- 

<HTML><HEAD><TITLE> frame_map2.html 
</TITLE></HEAD>
<HR> <H1> This is the initial frame </H1>
<HR> 
</HTML>

Click here to see this example.