Image Map: Mouse Hover Effect on Area Using JQuery

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>