HTML Image Map:
HTML image map is a most visually satisfying method for navigation around the site. An HTML image map is a large picture which has areas that the reader can click with a mouse.
The general syntax for an image map is as follows:
<img src=”file name” usemap=”#name”>
< map name=”name”>
<area shape=”circle”/”rectangle”/”polygon”/”default” Alt=”string” Cords=”string” href=”url”>
</map>
The above syntax creates the clickable area on an HTML image map.
You May Also Like:
Features of HTML
Structure of HTML Document
HTML Formatting Tags
Different Types of Lists in HTML
Tables in HTML
To create an image map to have to follow the following steps:
1. Image:
First of all, you need a suitable graphic. 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.
2. Co-ordinates:
When you've chosen or created your desired image, you then insert it into an image editor (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 or then insert them into your document.
3. Hot Spot:
There are three different shapes commonly termed "hot spots" that can be used in image maps. They are as follows:
a. RECT:
Rect is obviously short for rectangle. For this one, you'll need two different co-ordinates. Top right corner and bottom left corner.
b. CIRCLE:
For this, you need is the centre co-ordinate i.e the point in the centre of your shape and it's radius size.
c. Polygon:
The most common hot spot used and it 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 i.e 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.
4. Map Name:
Just like any person, document 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.
5. Area & Anchor Tags:
There are two more tags which are used in HTML image map. <area shape="rect"> is a tag that identifies which hotspot is being used. The other is the anchor tag. It's just <href="http://www.yourreference.com>.
Here is the example for Image mapping:
<body>
<img src="/shapes.gif" usemap="#example" border="0">
<map name="example">
<area shape="polygon" coords="29,34,35,11,85,37,82,56,69,78" href="http://www.yahoo.com">
<area shape="rect" coords="138,142,251,179" href="http://www.google.com">
<area shape="circle" coords="38,111,35" href="http://www. facebook.com">
</map>
</body>
You May Also Like:
HTML Css(Cascading Style Sheets)
Forms in HTML
Different CSS Properties
