Creating Clickable Image Maps in MS FrontPage 2000

It is fairly easy to create clickable image maps in FrontPage, although some of the operations are a bit obscure. The following procedure shows how to create a FrontPage Web site with a home page that links to a page containing a clickable image map with two vertical frames, so that clicking on a mapped region in the left frame causes the corresponding image to appear in the right frame.

1. Create the home page

   • Invoke FrontPage on your PC
   • Click on the Navigation icon to see the Navigation page
   • Click on File > New > Web > Empty Web
   • Click on File > New > Page to create your Home Page
   • Double click on the "home Page" icon to edit it. Add some text, and perhaps a picture to it

2. Create a 2nd page and convert it to frames

   • Click on the Navigation icon again, then click on File > New > Page to create a 2nd page, which appears below the first page
   • Double click on this new page to get into edit mode
   • While inside this new page, click on File > New > Page > Frames > Vertical Split . This creates a frames page that, in effect, overlays the original new page
   • In the left frame, click on New Page and insert the image file that you wish to use as an image map
   • Do the same with the right frame, except whatever appears there is simply to serve as the initial page before you click on anything

3. Create the Image Map

   • Click on the left frame to highlight it, and then click on one of the shape icons (rectangle, ellipse, or polygon)
   • Draw the shape. When you are finished, a new menu opens up: use the browser to move to the URL that you wish to associate with the region that you have just drawn. In the same menu click on Target Frame and another menu opens up which contains an outline of the current page: click on the right frame to establish it as the target frame so that the URL will appear there.
   • Repeat the above step as many times as there are regions in the image that you wish to click to display an associated URL in the right frame

4. Save the frames files

   • Click File > Save . That initiates a dialog which displays three highlighted pages in sequence:
     • First, the left frame is highlighted. Give it a name, for example, leftFrame
     • Then the right frame is highlighted. Give it a name, for example, rightFrame
     • Then an outline of the entire frame is highlighted. Enter its name, e.g., wholeFrame
     This process insures that all components of the frameset are properly saved

5. Link the frames page to the home page

   • Now that the frames page and its components are saved, you can link it from the home page: double click on the home page to edit it and add a link to "wholeFrame" and save the page

6. Publish your page

   • First be sure to establish a sub-directory in your public_html directory to receive the FrontPage output. This is important because FrontPage may overwrite some of your existing files and will always create a number of files and sub-directories that would be mixed in with your other files in public_html. Lets call this sub-directory "Frontpg" (you create it with the command homer% mkdir Frontpg )
   • Click on File > Publish and type in the address:
     ftp://homer.u.washington.edu/public_html/Frontpg
     Then supply your login name again and your password when a new menu appears. All of the files needed for your clickable image map frames page are written to your Frontpg sub-directory. Then link to the "index.htm" file in Frontpg" to test it.