Image Map; Mouse Hover Effect on Area using jQuery

Another easy but interesting stuff I found 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 huge response and you can start learning this from there but here I got something different for you. I will take the advantage of jQuery Library for this. I’ll start discussion from very basic. Wanna see how? Let’s begin.

Watch this video clip before you start exploring.

Download the demo project from here and test it yourself.

Basic Image Mapping

Here we will see the very basic code of 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 above code; one thing you always need to write same that is ‘usemap’ attribute in <img> tag and ‘name’ attribute in <map> tag because it decides which image to use for mapping. One another thing; I’m using four rectangular area on image having different coordinates, so how to get the coordinate. Well, it is very easy for those who is expert 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:

Now, how to create this one?

No worries just go ahead and add 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 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 all you set to run and explore. I hope you enjoyed it. Thanks. Happy Coding!!