About the Internet
About Web Browsers
Why Domain Names
HTML vs XHTML
Making Webpage Files
Naming Webpage Files
About HTML Tags
Basic HTML Page
DTDs and Doctype Tags
Spaces and New Lines
Bold, Italics, More
Comments in HTML
How to Add Images
Sources of Images
Image File Formats
Color in HTML & CSS
"Web-safe" Color Chart
Intro to CSS
Ways to include CSS
Some Useful CSS
CSS Hover for Links
Promoting Your Site
Making an Image Map
What is an Image Map?
An image map is an image which has one or more links that apply to different regions of the image.
The original image maps were server-side image maps. Information about what different areas on the map mean were stored in a separate file on the web server. The server would decide what to do next if someone clicked on the image. These are not used much because for several years the major browsers have understood client-side image maps.
With a client-side image map the browser does the work all the information it needs is right there. Of course this means that in order for an image map to work the browser has to know what to do with this information.
Major browsers such as Netscape and IE have known how to do client-side image maps for several versions now, but it is still best to include text links also:
How to Fake an Image Map
Cut the image into smaller pieces, and reassemble them in the page using a table. Put link tags around each piece of image that should go somewhere. Only one link possible per piece of image.
If your image is easily split up this way, it might be the better option.
How to Make an Image Map
Figure out where your active areas are. They are described by their pixel co-ordinates with 0,0 being the top left corner. You can do this by guessing until you get it right, or by using a graphics program that tells you co-ordinates as you move your mouse over the image, or you can use software such as Fireworks that makes the process easy because you can just mark out areas with the map tool and it does the rest.
Put the image in your page using a normal image tag except add the attribute usemap="#name_of_map", where name_of_map is what you've named your map. You can have more than one image map in the same page as long as they've got different names.
For the map above the image tag is :
Put the map in your page. It can be right next to the image or it can be elsewhere.
In our example the map code is :
The map begins with a <map> tag and ends with a </map> . The map tag needs a name="name_of_map" attribute where "name_of_map" is the name of the map used in the image tag. Note that in the image tag the name has a # before it, but in the map tag it doesn't.
Then put an area tag for each active area. The area tag needs these attributes: