General
   The above image illustrates a typical image map. WebTV can only use square or rectangular shapes for the map areas on the image. ¹. WebTV's cursor will highlight only the areas of the image map that are defined, but a computer's cursor can be placed over and clicked on any point of the image map. The default tag is used to catch these clicks and it can contain an event and/or link.

   Each link area is made up of two sets of x y coordinates. The first set of x y coordinates denote the uppermost left corner of the mapped area. The second set of x y coordinates denote the bottom right corner of the mapped area. The first map area in the example image above is composed of the coordinates 128,4,180,61 and the second map area is composed of the coordinates 144,149,252,193.

   The Image Map Tool will allow you to generate your coordinates, add the link URL's, add the image url and dimensions, and output the resulting image map with the codes in a text area to copy.

Instructions
   1. The first thing you need is an image. If you load the Image Map Tool directly from an image it will be detected and loaded. If you arrive from a non-image file you will be prompted for an image url.
   When the image is loaded it will be "clickable". Move the cursor over the image and point to the vertices ² you want for the top left corner of the rectangle you are making and click. This will generate the first x y set in the text area below the image. Next, move the cursor over the image and select the bottom right corner vertices of the rectangle for your link area and click ( these values will always be greater than the first ). This completes the coordinates for the link area. Subsequent link areas are made following the same steps.

   2. When you have generated your x y coordinates for each area that you want to map you are ready to complete your map tags. Select "Code Generator".
   At the bottom of the page a text area will load with three options below it. Click on "Start", this writes the map opening tags. You can also use this button to "restart" the codes if you make an error. Next, click on "Gen Link", you will be prompted for a URL for the link, this is optional at the time of making your map and can be added later. Click "ok" and you will be prompted for the first set of x y coordinates. Enter the first set separated by a comma ( example 100,150 ). Click "ok" and you will be prompted for the second set of coordinates, enter them separated by a comma, and hit return. Each set for each area your are mapping on the image is entered this way. To start a second area select "Gen Link" and repeat the process following the prompts.

   3. The final step is selecting "Close". You will be prompted for a default URL, this is optional at the time of generating the code and can be added later. The script will then add the image url, height, width, map closing tags, and display the image map with the codes ready to copy.

   If you would like to practice with the above image click here to begin.

Related Links
• Webopedia Definition and links
• WDG: MAP - Image Map
• TechTV | Demystifying the HTML
• Authoring for WebTV - Seamless Image Maps
• Poorman's Map Syntax