Last Modified: 10/25/00
Computing & Communications Computer Training
Semi-Automated Clickable Image Maps Using LiveImage
There are automated tools that make it easy to create clickable image maps. One of these is the LiveImage Program which we will use to illustrate how such image maps are created (note: if you download LiveImage and it complains that some of the DLL files are not up-to-date, then download the separate DLL files into the same directory and then double-click on the downloaded DLL file to actually install the new DLLs in your system). Another site that you can investigate is Client-Side Imagemaps which has links to similar programs for the Macintosh, such as WebMap.

Recall the clickable image map file that we created using manual methods: 

<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" HREF="Image/lf.html">
  <AREA SHAPE="POLY" COORDS=
   "93,188 245,188 244,36 82,36 133,124 65,136" HREF="Image/rt.html">
  <AREA SHAPE="DEFAULT"  HREF="Image/default.html">
</MAP>
Our goal with the LiveImage program is to create a file with the same information. We do so as follows:
  1. Use SSH Secure File Transfer 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: myclick.htm
  6. Then we select the image file: Larryg/mymap.gif
  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/lf.html 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/rt.html 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/default.html
  13. Now test it by clicking on the switch at the extreme right side of the toolbar, and select the 2nd option (start a web browser).
  14. If it works, you should invoke NotePad to do some minor editing and then transfer "myclick.htm" to homer where it can be incorporated in a web page.
Note that you can delete a polygon by clicking on the pointer tool, then clicking on the polygon, and then clicking on the red X. You can re-arrange points by clicking on the pointer tool, and moving it over a point. When the cursor turns into a hollow crosshairs, you can drag the point anywhere you wish.

You may test this map by clicking here

©1999 UW Computing & Communications