Image Map 101
Now, what's an image map? Basically, it's an image with links on it. How is it different from an image link? In an image link, you can only have 1 link in 1 image. In an image map, you can have multiple links in 1 image.
I've created a sample image for the purpose of this tutorial:
You can see there are text written on the image and they're enclosed in boxes. That's where our links should be. Note that the green boxes are there just for illustration purposes. How do we put our links there? We create an image map...
Step 1: The Code
It's divided into 2 parts: First, the image map and, second, displaying the image. Let's now see what the first part of the code would look like:
<map name="myImageMap"> <area shape="rect" coords="x-b,y-b,x-e,y-e" href="link.html"> </map>
Above is the basic structure of the image map. The first line, we create a map called "myImageMap". You can name your map anything you want but for the purpose of this tutorial, that's what we'll use. The second line, we select an area in the map shaped like a rectangle with the coordinates x-b (stands for x-begin), y-b (y-begin), x-e (x-end) and y-e (y-end). Then that particular area is linked to link.html. The more links you have, the more areas you add.
Huh?!? All this coordinates x-b, y-e confusing you? Let's check on the sample image above to make it easier for you to understand. Look at the first green box where it says "site". The upper left corner of the green box is where our x-b (x-begin) and y-b (y-begin) are and the lower right corner of the box is where our x-e (x-end) and y-e (y-end) are.
Before you get any more baffled, the values of our coordinates are supposed to be numbers (in pixels). So, according to the example above, for the site link: x-b = 110, y-b = 9, x-e = 160, and y-e = 34. For the gallery link: x-b = 48, y-b = 40, x-e = 149, and y-e = 73. And so on...
Simply put, x-b is the horizontal distance from the leftmost side of your picture to the upper left corner of the green box; y-b, is the vertical distance from the topmost side of your picture to the upper left corner of the green box; x-e is the horizontal distance from the leftmost side of your picture to the lower right corner of the green box; y-e, is the vertical distance from the topmost side of your picture to the lower right corner of the green box. Got it now? It's sort of like plotting points in a graph.
Let's move on to the second part of the code with is displaying the image.
<img src="map.jpg" usemap="#myImageMap">
You'll notice that this is just the normal code for displaying images only we added usemap="#myImageMap". That will enable us to use the image map we've created on the first part of the code.
Step 2: Putting Them Together
This is what the code for our example image should look like:
<map name="myImageMap"> <area shape="rect" coords="110,9,160,34" href="site.html"> <area shape="rect" coords="48,40,149,73" href="gallery.html"> <area shape="rect" coords="35,78,135,102" href="credits.html"> <area shape="rect" coords="72,111,143,135" href="clear.html"> </map> <img src="map.jpg" usemap="#myImageMap">
The code will result in something like this:
Thanks to Stock Exchange for providing the stunning flower picture.
Conclusion
I hope I explained it clearly. You can use any type of image for your image map. Finding coordinates is pretty easy. Any decent image editor (even MS Paint) can give you the coordinates for your images.
For those who are concerned with validation, just put the alt parameter in the img and area tags.
If you have any questions or if you want to discuss this tutorial, you may post at Blinding Light MB.