Navigation Bar Image Map Template

The navigation image map at the bottom of this page was created using Map This! image mapping software. Map This! is a freeware image mapping tool--you can find it on the CD-ROM under Web Tools.

You create an image map using Map This! like this:

  1. Create a GIF or JPG image to use as the image map. Feel free to use the GIF image, NAVBAR.GIF, that is used in this page, to add navigation bars to your web pages (if the destinations for the navigation bar are going to change with each page, you need to remap the image for each navigation bar you want to create).
  2. Create an HTML file with the GIF or JPG image you are using as an inline image.
  3. Run Map This! and select to create a new image map. It will prompt you for the name of the image you want to map.
  4. Select the Rectangle tool to draw a rectangular selection area (select the Circle/Oval tool to draw a circular/ovular selection area, or the Polygon tool to draw a polygonal selection area).
  5. Position the mouse in the upper-left corner of the selection area you want to define, then hold down the left-mouse button and drag the mouse to define the selection area. Lift off the mouse button to define the area.
  6. Select the Select Arrow tool, then double-click inside the selection area you just defined. In the "URL to activate..." box, type the URL for the file to be activated by the selection area (if the file is in the same directory as your image map file, just type the filename, otherwise use a relative URL).
  7. Repeat steps 4, 5, and 6 for each selection area you want to define.
  8. When you have defined all the selection areas for your image map, select File and Save As. Fill out the Settings form
  9. With HTML selected as the File Format, select the HTML file you created in step 2 above, then click Save.
  10. At the Save As HTML Map dialog box, just click OK.
  11. In your text editor or HTML editor, load the HTML file you created in step 2.
  12. Edit the IMG tag for the image you are using for your image map. Insert a USEMAP="#mapname" attribute value, substituting the title you designated earlier (you'll also see it in the MAP tag, as NAME="mapname", in the mapping codes at the bottom of the file),
  13. Resave your HTML file.
  14. Open your HTML file in your browser and test-run your image map.

[Back] [Home] [Next]