Introduction:
In this article I'll explain how image maps work, how they are created and what they're used for.
What is image map?
An image map is one image with multiple clickable areas.
How to map multiple images?
First of all we load an image on which we want to map multiple images and also set the height and width of the image.
<img src ="Water-lilies1.jpg" width ="150" height ="130" alt="waterlilies" usemap="#waterlilies"/>
To map the image use the following stetement within the <map> and </map> tag like this:
<map id ="waterlilies" name="waterlilies">
<area shape ="rect" coords ="0,0,10,10"onMouseOver="writeText('Hi !')"
href ="Blue hills.jpg" target ="_default" alt="blue" />
</map>
There are three different shape used in image map:
rect: It is short for retangle. You'll need two different co-ordinates (Top right and bottom left).
For example: shape ="rect" coords ="0,0,10,10"
Circ: It is 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.
For example: shape ="circ" coords ="30,100,10"
Poly: It is used for the polygon. So if you going to have a pentagon, then you list all five co-ordinates. All co-ordinates should have listed in order.
For example: shape ="poly" coords ="40,50,55,60,70,80,85,90,145,126"
Example: In this example we have to take three images for mapping and one image for clip board. We set the co-ordinates and shape of every image within the <area> tag. See the following example.
<html>
<head><title>Image map</title>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt
}
</script>
</head>
<body>
<img src ="Water-lilies1.jpg" width ="150" height ="130" alt="waterlilies" usemap="#waterlilies"/>
<map id ="waterlilies" name="waterlilies">
<area shape ="rect" coords ="0,0,10,10"onMouseOver="writeText('Hi !')"
href ="Blue hills.jpg" target ="_default" alt="blue" />
<area shape ="circ" coords ="120,20,10"onMouseOver="writeText('Hello! Puru')"
href =Sunset.jpg target ="_blank" alt="sunset" />
<area shape ="poly" coords ="40,50,55,60,70,80,85,90,145,126"
onMouseOver="writeText('Bye !!!!')"
href =Winter.jpg target ="_blank" alt="winter" />
</map>
0 <p id="desc"></p>
</body>
</html>
Output: You will see the output like this:
Figure 1: Mapped image.
Move the cursor at another place you will see something as:
Figure 2: At this point one image is mapped.
See both figure (figure 1 and 2). When you put mouse over the image then you will see the different message (only on mapped area) and if click over them then you see the different images like as:
Figure 3:
Move the cursor at another place you will see different message like this:
Figure 4: Another image is map.
When you click on this co-ordinate you will see the following image.
Figure 5:
Conclusion:
Image mapping is very easy to create and very professional looking when used with a good graphics.