Creating HTML Image Maps
This tutorial is written and contributed by Nebojsa Pajkic. Please refer to footnote for more info.
Many of us always try to impress our visitors with JavaScripts, Java Applets, Flash Players, stunning graphics and so on, but we keep forgetting that good old HTML can also impress visitors... with a little help. In this tutorial, I'll explain how image maps work, how they are created and what they're used for.
For the uninitiated, an image map is one image with multiple "clickable" areas. For example:
-Image
First of all, you need a suitable graphic. You need to be a bit careful when choosing the right image. An image that cannot be divided in different sections is not your best choice, but an image that has clear cut-offs or lines would be better. Of course, this down not apply to navigational menus or similar, just to everyday pictures like animals, objects or people.
-Co-ordinates
When you've chosen or created your desired image, you then insert it into an image editor (I use Ms Paint) so that you can find its co-ordinates. Try to either write down different co-ordinates of take them one by one and then insert them into your document. You'll need different co-ordinates depending on what sort of "hot spot" you'd like to use. Hot spots are covered in the next paragraph.
-Hot Spot
Now that you've got your image and co-ordinates, HTML comes to finalise your job. There are three different shapes (commonly termed "hot spots") that can be used in image maps. They are as follows:
-RECT
-CIRCLE
-POLYGON
-Rect
Rect is obviously short for rectangle. For this one, you'll need two different co-ordinates. Top right and bottom left.
-Circle
Many people get confused with this one and many don't even know that it exists. I personally think it's the easiest of all. All you need is the centre co-ordinate (the point in the centre of your shape) and it's radius size (remember your maths: radius is HALF the diameter. Don't get diameter and radius mixed up!).
- Polygon
The most common hot spot used. This is used for when you can't use neither of the above hot spots. This one uses the co-ordinates of the points in order. So if you're going to have a pentagon (shape with five sides), then you list all five co-ordinates but make sure they're listed in ORDER. One after the other, otherwise you'll confuse some browsers.
-Map Name
Just like any person, document, image and country, image maps also require names. This is simply because if you are going to include more than one map on your page, then to identify which image goes with which map, you'll need to name the map. Confused? Look here:
<IMG SRC="cats.gif" USEMAP="#kitties"> <IMG SRC="dogs.gif" USEMAP="#puppies"> <map name="kitties"> [.... codes for map which I'll show you later on ....] </map> <map name="puppies"> [......] </map>
Now, if you didn't name each map, how would the browser know which image goes with which map?
You'll also notice this tag at the end of each map: </map>. You may have suspected by now that </map> just closes the map. Simple!
-Area & Anchor Tags
There are two more tags you should know before completing your image map. <area shape="rect"> is a tag that identifies which hot spot is being used. The other is the anchor tag which I'm sure you already know what it means. It's just <href="http://www.YourLink.com>. So in a completed code, they should both look like this:
<area shape="circle" coords="245,30" href="http://www.YourLink.com">
-Final Code
Now you just need to put all these codes together and you've got magic! Here's what your final code should look like:
<body> <img src="trees.gif" usemap="#green" border="0"> <map name="green"> <area shape="polygon" coords="19,44,45,11,87,37,82,76,49,98" href="http://www.trees.com/save.html"> <area shape="rect" coords="128,132,241,179" href="http://www.trees.com/furniture.html"> <area shape="circle" coords="68,211,35" href="http://www.trees.com/plantations.html"> </map> </body>
- Other Tips
Of course, you don't just have to use external links. You can also use anchors for bookmarks on the page [href="#SectionTwo"], mailto [href="mailto:george@trees.com] and other anchor tags. You can specify the target as well (put it right after the anchor tag) [target="_new"]. Insert alternative text tags- alt (insert it after anchor as well) [alt="Click here to learn about trees"].
- Summary
So that's all you need to do. Very easy to create and very professional looking when used with a good graphic.
------------------------------------
Written by Nebojsa Pajkic
Webmaster of Wizard's domain
Web design + FREE services and resources for Webmasters and Internet
surfers: http://WizardsDomain.net
