[Back] [Home] [Next]

Navigation Bar Image Map Template

You can use this template to add an image map navigation bar at the top or bottom of any sequentially ordered web pages you may create (pages arranged like the chapters in a book, in other words). Just substitute the actual file names you want to link to for navprev.htm, navhome.htm, and navnext.htm (be sure to substitute for them in both places, not just one). For instance, if your navigation bar is inserted in the fifth page in a series of six pages named chap5.htm (Chapter 5), then you might substitute chap4.htm for navprev.htm, contents.htm for navhome.htm, and chap6.htm for navnext.htm.

Right now the template is set up to just link to HTML files in the same folder as the linking page. If you want to link to HTML files in other folders in your web site, you'll need to use a relative URL (HREF="../chap6/index.htm", for instance) rather than just the file name.

Creating Your Own Image Maps

The navigation image map at the top of this page was created using Map This! image mapping software. Map This! is a freeware image mapping tool. Most of my books have this program included on the CD-ROM (if not, check my Web Tools site at http://www.callihan.com/webtools/ for where you can download it. Here's a quick rundown on how to create an image map using Map 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, or alternatively, edit the HREF attributes in the mapping codes to point to the new files). Tip: create a transparent GIF to display it against a background.
  2. Create an HTML file with the GIF or JPG image you are using as an inline image. It is a good idea to add regular hypertext links to jump to the previous, home, and next pages you are linking to, to take into account browsers that don't support client-side image maps. (See the bottom of this page for an example.)
  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.