Last Modified: 10/25/00
Computing & Communications Computer Training
Semi-automated Clickable Image Maps with Frames

You can use the LiveImage program to simplify the process of creating image maps with frames. We will use the example in Manual Clickable Image Maps with Frames to create the file frame_map1.html: 

---------------------------------------------------------------  

<HTML><HEAD><TITLE>frame_map1</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>
---------------------------------------------------------------
We use almost the exact same approach as we used in the non-frame version: the only difference is that we add the target name (MAP2) in the same menu as we use to specify the URL to be activated for each area. So the sequence is:
  1. Use WS-FTP or Internet Neighborhood to transport the image map GIF file to your PC. Here we have named it "mymap.gif"
  2. On your PC invoke LiveImage
  3. This opens a menu and we select "New Image Map Wizard" to create a new map
  4. On the next menu we elect to create a brand new HTML file
  5. On the next menu we select the directory in the left split window (Larryg in my case) and type in the name of your HTML file: frame_map1.html
  6. Then we select the image file: Larryg/mymap.gif (in my case)
  7. We make a title for our image map: shapes
  8. In the window that opens up, the image mymap.gif should appear. Click on the polygon tool, and outline the left polygon by clicking once for each point and twice to end the polygon
  9. In the menu that opens up, type in the URL to be activated: http://staff.washington.edu/larryg/Image/leftp.gif . Then set the Target name: MAP2 and click OK
  10. Click on the polygon tool, and outline the right polygon by clicking once for each point and twice to end it
  11. In the menu that opens up, type in the URL to be activated: http://staff.washington.edu/larryg/Image/rightp.gif . Then set the Target name: MAP2 and click OK
  12. Then outline the entire background by clicking on 4 points that enclose the entire image, and in the menu that opens up type in http://staff.washington.edu/larryg/Image/defp.gif and set the Target name MAP2
  13. Now test it by clicking on the switch (it looks like a light switch) at the extreme right side of the toolbar, and select the 2nd option (start a web browser). For the test it will create separate browser windows when you click on the left image because your test on the PC does not contain the total HTML environment needed for the frames to work -- but things should work when you transport the HTML file to your public_html directory.
  14. If the test works, then save the frame_map1.html file to your PC (note that the PC will convert the long name frame_map1.html to something like frame_~1.htm so you will have to rename it when you send it to Homer).
  15. Then use WS-FTP to send frame_map1.html to Homer, where you have all the other files (the GIF files and the other HTML files). You may have to use Pico to do some minor editing of frame_map1.html to make sure that the names and directory paths are correct in the Homer environment.
Click here to see this example.

©1999 UW Computing & Communications