Image maps are images with different parts of it, called hotspots, linking to different pages or sites. An example is the piece of notebook paper on my home page.

To create an image map the short easy way:

  1. Place an image (either GIF, JPEG, or PNG) on your HTML page.
  2. Open MapEdit (an application). Download Here
  3. With MapEdit, open the HTML page, and then open the image.
  4. From either the Tools menu or the toolbar, select a shape for the desired hotspot: a rectangle [default], a circle, or a polygon (this allows the most free form)
  5. To create hotspots in the shape of:
    • a rectangle -- left click on one of the corners of the area that you want to become a link. Then, left click a second time on the opposite corner, thus tracing the shape of a rectangle. (you don't need to hold down the mouse button in between the two mouse clicks)
    • a circle -- left click approximately around the center of the desired circle, then left click a second time around the edge.
    • a polygon -- left click on any spot on the edge of the desired polygon shaped hotspot. Then carefully trace the outline of the deisred hotspot by continuously left-clicking at points of curvature. If you happen to make a mistake, simply press the ESC key to cancel it. Once you have surrounded the area, click the right mouse button or press enter to stop.
    (When you are creating the hotspots, MapEdit draws a line outlining the area that you are choosing. This line is only a guideline and isn't being visibly drawn onto your image. You can change the color of this line by selecting Edit Hotspot Color which is on the File menu.)
  6. Once you have either left clicked for the second time or right clicked in the case of the polygon, a window will pop-up requesting the URL that the hotspot will link to. Please remember to type in exactly what you would type in between the quotation marks of the 'a href ' tag; this means that you should type in the entire http://www.address.com or filename.htm(l) or #anchor label.
  7. Also, you may wish to enter a title, a.k.a text alternative for each hotspot. This is extremely important for any non-graphic supporting browsers that might be viewing your page.
  8. To finish, simply click OK or press enter. And PLEASE remember to SAVE, (as always it's on the File menu).
  9. To Test or Edit your hotspots, choose the cursor-looking button, or select 'Test + Edit' under the Tools menu. Then, just left click the hotspot area and the same pop-up window will appear.