Making a Clientside Image Map

If when you go thru this tutorial you decide you need more help, or you just don't want to do it by hand, you can use the ImageMapper it will generate the complete map code for you. ImageMapper

How to make a image map to provide multiple links from one image. We are providing some basic instructions to get you started on making one of your own. As with most codes, this is much more complicated to explain, than it is to actually do.
For our examples we've used Mt. Rushmore with links to the Presidents respective biographies at the "Official" Whitehouse home page.



1. The first step is to select the image you wish to use.
2. Then you will need to get the coordinates for your "hot zones" or link coordinates. The coordinates are measured in pixels from the top left corner of your image. So if you had an image that has a height of 300 and a width of 300, the center of this image would have coordinates of 150,150 - 150 pixels from the top of the image and 150 pixels from the left of the image. You could do this by using The Poor Persons Image Mapper This is a great tool for mapping your image.

Map your gif or jpg with:
The Poor Persons Image Mapper     (map coordinates only)
Draac's Image Mapper     (map coordinates only)
Owens4 ImageMapper     (Complete map generator)
Online Image Map Tool - Upload your image, map it, get your code!     (Complete map generator)

3. When you get there simply enter the URL of your image. Once you've entered the URL, you must decide what shape you need for your "hot zone". You have the choice of circle, rectangle or polygon. If you choose circle you will have 3 coordinates, your X coord and Y coord and your radius coord. A rectangle will have 4 coordinates, the top left X and Y coords and the bottom right X and Y coords. A polygon will have numerous coords depending on the shape you choose for your "hot zone". You will be able to click on the desired points for your "hot zones"/links and the mapper will give you the x and y coordinates. X being the horizontal coordinate and Y being the vertical coordinate.

4. Write the html to create the map. The code looks like this:
One thing to keep in mind your usemap="#name" and map name="name" must be the same name. You can not resize your mapped image, or your coordinates will not work. If the image you want to use is not the size you want, resize before mapping.
That's all there is to it! We hope that you find this useful and informative. If you try this and encounter any problems, please feel free to email us at owens_4@hotmail.com