Setting up an Image Map

An image map allows you to use any old picture and set up parts of it to use as your links. - which means you can add javascript and linking functions to your image map.

Here's the code to set one up:

<MAP NAME = "IMAP">
<AREA NAME = "link1" COORDS = "54,105,118,125" HREF
= "http://www.microsoft.com">
<AREA NAME = "link2" COORDS = "104,53,171,75" HREF
= "http://www.netscape.com">
</MAP>
<IMG SRC = "imap.gif" WIDTH = 240 HEIGHT = 155 USEMAP = "#IMAP">

1. Name your map (whatever name you want to use)
   
   <MAP NAME = "IMAP">
   
   
2. Set up an "area" for each link you want to add to your picture
   
   <AREA NAME = "link1" COORDS = "54,105,118,125" HREF = "http://www.microsoft.com">
   
   
3. Give that area it's own unique name
   
   <AREA NAME = "link1" COORDS = "54,105,118,125" HREF = "http://www.microsoft.com">
   
   
4. Set up the coordinates on your page - that identify the area that you want to be "click-able"
   These are the actual pixels that identify where the mouse will touch. More coordinates identifies whatever shape you want to make for the outline
   
   <AREA NAME = "link1" COORDS = "54,105,118,125" HREF = "http://www.microsoft.com">
   
   
5. Now, the HREF attribute allow us to add a hyperlink to that spot we just identified.
   
   
   <AREA NAME = "link1" COORDS = "54,105,118,125" HREF = "http://www.microsoft.com">
   
   
6. The ending "</map> tag tells your browser that you are finished setting up spots on your map
   
   </MAP>
   
   
7. Now associate a picture with this mapped out spot on your page
   
   <IMG SRC = "imap.gif" WIDTH = 240 HEIGHT = 155 USEMAP = "#IMAP">
   
   
8. And (finally) tell your picture which map to use
   
   <IMG SRC = "imap.gif" WIDTH = 240 HEIGHT = 155 USEMAP = "#IMAP">