I found another easy but interesting thing today on http://in.jagran.yahoo.com/epaper/ (Hindi Language e-News Paper) and decided to develop it on my PC. If you open Google and search by typing "Image Map in HTML" you will get a huge number of responses and you can begin learning about this from there but here I have something different for you. I will take advantage of the jQuery Library for this. I'll begin the discussion with the very basics. Wanna see how? Let's begin.
Watch this video clip before you start exploring:
http://www.youtube.com/watch?v=q-usRjWhLyk&feature=player_embedded
Download the demo project from here and test it yourself.
Basic Image Mapping
Here we will see the very basic code of the HTML Image Map.
Rectangular Map
<div>
<img src="images/linksOnImage.jpg" usemap="#urls">
<map name="urls">
<area shape="rect" coords="0,0,142,50" href="javascript:alert('Navigate to ITORIAN');">
<area shape="rect" coords="2,48,139,96" href="javascript:alert('Navigate to GOOGLE');">
<area shape="rect" coords="2,93,139,141" href="javascript:alert('Navigate to YAHOO');">
<area shape="rect" coords="1,139,138,187" href="javascript:alert('Navigate to MICROSOFT');">
</map>
</div>
Polygon Map
<div>
<img src="images/5.png" usemap="#me" border="0">
<map name="me">
<area shape="poly" coords="125,65,124,61,123,63,122,62,119,63,123,69,122,68,120,62,123,61,125,60,131,64,131,69," href="javascript:alert('My Left Eye.');" />
<area shape="poly" coords="149,62,152,60,150,60,148,58,148,63,146,65,146,62,146,61,146,58,159,61,158,62,158,60,156,67" href="javascript:alert('My Right Eye.');" />
<area shape="rect" coords="201,225,220,241" href="javascript:alert('Fastrack Watch.');">
<area shape="rect" coords="177,143,210,172" href="javascript:alert('Nike T-Shirt.');">
</map>
</div>
As in the above code; one thing you always need to write the same is the "usemap" attribute in the <img> tag and the "name" attribute in the <map> tag because it decides which image to use for mapping. One other thing; I'm using four rectangular areas on the image that have different coordinates, so how to get the coordinate? Well, it is very easy for those experts in "Computer Graphics" and I'm not going to show you the way to find the coordinates but I can put a resource url, were you need to upload your image and select the area and get the coordinates. Here you go: www.image-maps.com.
Effect on Area when Mouse Hover
Look at the screenshot given below:
![image1.gif]()
Now, how to create this one?
No worries, just go ahead and add the jQuery library reference and a jQuery method call like:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.maphilight.min.js"></script>
<script type="text/javascript">
$(function () {
$('.map').maphilight();
});
</script>
And add the class="map" attribute to the existing image map like:
<div>
<img src="images/enewspaper.png" usemap="#enewspaper" class="map">
<map name="enewspaper">
<area shape="rect" coords="0,112,119,453" />
<area shape="rect" coords="119,235,410,453" />
<area shape="rect" coords="411,232,490,453" />
<area shape="rect" coords="122,112,490,230" />
</map>
</div>
And now you are all set to run and explore.
I hope you enjoyed it. Thanks. Happy Coding!!