Sign In Sign-Up

Welcome!

Close

Would you like to make this site your homepage? It's fast and easy...

Yes, Please make this my home page!

No Thanks

  Don't show this to me again.

Close

The new web designer frequently finds the coding for image maps somewhat daunting, as it is a little more complex than many of the other basic HTML functions and includes a lot of numbers and measurements. Granted, the Image Map is not the simplest concept of HTML. A well constructed ImageMap, however, can greatly improve the look and feel of your website. This tutorial will take you step by step through the process of creating an Image Map, and show you a shortcut or two, courtesy of today's software developers.

1. Once you have selected or created the image that you want to use for your ImageMap, it needs to be placed in your document. This, of course, is done by using the IMG SRC tag.
2. The next step is to tell the browser that this image is to be incorporated into an ImageMap. To do this, in your IMG SRC tag, add the parameter USEMAP="#". The value after the pound sign is the name or your ImageMap, which you will assign to your ImageMap in the next step.
3. The first tag you need to create your ImageMap is MAP NAME="". This appears in one bracket set and the name must match the name you chose in you IMG SRC tag exactly. Spelling Counts!
   
4. The next tag is the AREA tag in which you will begin to define the "HotSpots", the linking areas of your ImageMap. First, in your AREA tag, tell the browser what SHAPE your HotSpot is going to be. For this example, we will use a rectangle, or RECT. (Other acceptable values include POLY, or Polygon, and CIRCLE.) So far, the AREA tag looks like:
   
AREA SHAPE="RECT"
   
   Now we have to tell the browser where to draw this rectangle in the image file.
5. The attribute that tells the browser where to draw the rectangle is COORDS, and is also a part of the AREA tag. Their are four coordinates that the browser needs to have. The first coordinate is the distance in pixels from the left side of the image, the second is the distance in pixels from the top of the image, and will define the top left corner of the HotSpot. The third coordinate is the distance in pixels from the left side of the image and the fourth coordinate is the distance in pixels from the top of the image, but these two define the lower right corner of the HotSpot. Each coordinate must be seperated by a comma. Our AREA tag now looks like:
   
   AREA SHAPE="RECT" COORDS="xx,xx,xx,xx"
Determining these coordinates is the part most people seem to find intimidating.
6. Recent versions (Win98 and later) of MicroSoft Paint can now read .jpg images. To determine the coordinates of your ImageMap, open the image file in MicroSoft Paint (If you've invested in a higher end graphics program, feel free to use it for this step!). As you drag your cursor across the image, you will notice two numbers in the lower toolbar that change as you move your mouse over it as shown in the screen capture below (type is enlarged for easier viewing):
   
   
   These two numbers are the distance in pixels from the left side of your image, and the distance in pixels from the top of your image, respectively. All you need to do is place your mouse over the top left corner of your desired HotSpot, record the coordinates, then place your mouse over the lower right hand corner of your desired HotSpot, record those coordinates, then place them in your AREA tag as part of the COORDS attribute! Now, our AREA tag looks like:
   
   AREA SHAPE="RECT" COORDS="123, 29, 250, 89"
   
   
7. The final step is to tell the browser where to go when this HotSpot is clicked by a mouse. Simply add HREF="http://www.somewebsite.com" to the AREA tag. You may use the ALT attribute here, instead of in the IMG SRC tag, to create custom Alternative Text for each HotSpot. A complete AREA tag looks like:
   
   AREA SHAPE="RECT" COORDS="123, 29, 250, 89" HREF="http://www.yahoo.com/"
   
   
8. Enclose the tag in brackets, then repeat these steps for each section/link of your ImageMap. Don't forget the /MAP tag after you have defined the last area of your ImageMap!