Image Mapping

What is an Image Map?

An image map is a single image that is subdivided into key invisible regions called "hot spots." You can assign different links to each of these hot spots, or you can apply special formatting behaviors.

Creating an Image Map

Creating an image map involves several steps:

  1. First, insert the image you want to map into your html document. (Go to the <insert> tab and select "image")



    2.
  2. Next, right click on the image and bring up the image property inspector.



  3. Enter in a unique name for the image map (otherwise it will be named "map" by default). Also, take a look at the different hotspots or "links" you can make. They can either be a regular square, regular circle, or an irregular freehand polygon (when you work with the polygon tool, each click makes a point in the shape). Try drawing a hotspot.




    4.
  4. Once you have drawn the hotspot, select it with the mouse pointer. When the hotspot is selected, you will notice that the information will change slightly in the property box. Now you can assign links for the hotspot whenever someone clicks on that area of the image. The "target" box determines whether the link will open in the same window or in a new window. The "alt" text is a little description box that will appear next to the image when the web user moves their mouse over the hotspot.


    5.

Repeat the hotspot creation process until you're done adding links to your image. Be careful not to let your hotspots overlap since web browsers will confuse the two. In some cases, the browser will simply link both hotspots to the same file. In others, neither link will work. You can copy and paste hotspots and treat them just like any other web page object.