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!!

Comments

  1. I realy needed this :D
    Thanks

    ReplyDelete
  2. Thank you , this was my first jquery page ever written using maps :)

    ReplyDelete
  3. Hello can u give me the code of this please

    ReplyDelete
    Replies
    1. vinay: it is long long back post can't given you codes but you can do it yourself, just follow the given instruction.

      Delete
    2. there are some included files 'jquery.maphilight.min.js' and 'jquery.min.js'...how will it work if those files are not given

      Delete
    3. jQuery library is here http://code.jquery.com/jquery-1.8.0.min.js and jQuery map highlight library is here http://code.google.com/p/regetp01/source/browse/trunk/catalogo/app/webroot/js/jquery.maphilight.min.js?r=2120

      Delete
    4. By using the above instructions it is not working. Please give me the code of highlighting the map please. Thanks for all your time and efforts.

      Delete
  4. Thanks man.This is awesome and exactly what I needed. It works!

    ReplyDelete
  5. Thank you for this great instruction, its fantastic!
    I have a quick question, I would rather have a mouse over effect instead of clicking, is it possible? I am building a map with 112 volcanos in Costa Rica and I can see some people not wanting to click 112 times :(

    Have a great day

    ReplyDelete
  6. That worked fantastic. Thanks man and have a nice day.

    ReplyDelete
  7. responsive and joomla theme it is not working...

    ReplyDelete
  8. sir its works but here some problem are generate while we take mouse over on next to area , then its highlight previously one means that it can't highlight that where map mouseover, its highlight previous image area when mouse take over to next area.

    ReplyDelete
  9. Can we change the border color here.

    ReplyDelete

Post a Comment

Popular posts from this blog

Migrating database from ASP.NET Identity to ASP.NET Core Identity

Customize User's Profile in ASP.NET Identity System