How to highlight image area, on mouseover of the area, or from a (external) text link?

This can be done by using JQuery Map Highlight Plugin (jquery.maphilight.js).

Here’s the complete code:

<!DOCTYPE html>
<meta charset=”utf-8″>
<script type=”text/javascript” src=””></script&gt;
<script type=”text/javascript” src=”jquery.maphilight.js”></script>
<script type=”text/javascript”>$(function() {


<a id=”Area1Link” href=”#” onmouseover=”$(‘#area1’).trigger(‘mouseover’);” onmouseout=”$(‘#area1’).trigger(‘mouseout’);”>Area 1</a><br/>
<a id=”Area2Link” href=”#” onmouseover=”$(‘#area2’).trigger(‘mouseover’);” onmouseout=”$(‘#area2’).trigger(‘mouseout’);”>Area 2</a>
<td><img src=”demo_simple.png” width=”420″ height=”300″ class=”map” usemap=”#simple”></td>
<map name=”simple”>
<area id=”area2″ href=”#” shape=”poly” coords=”47,62,106,61,134,72,135,118,30,116″ alt=”Link” title=”Default behavior”>
<area href=”#” shape=”poly” coords=”32,157,133,157,127,192,127,211,28,211″ alt=”Link” data-maphilight='{“strokeColor”:”0000ff”,”strokeWidth”:5,”fillColor”:”ff0000″,”fillOpacity”:0.6}’ title=”Metadata’d up a bit”>
<area id=”area1″ href=”#” shape=”circle” coords=”290,102,30″ alt=”Octoface” data-maphilight='{“stroke”:false,”fillColor”:”ff0000″,”fillOpacity”:0.6}’ title=”Metadata’d up a bit”>
<area href=”#” shape=”poly” coords=”219,190,225,175,237,157,239,148,245,142,251,140,263,140,265,139,310,139,311,145,364,182,363,201,343,221,333,213,329,181,313,177,330,234,295,231,292,174,279,176,282,204,269,220,255,206,267,167,235,193″ alt=”Legs” data-maphilight='{“stroke”:false,”fillColor”:”000000″,”fillOpacity”:1,”alwaysOn”:true}’ title=”Metadata’d up a bit”>


The JavaScript Library is available here:

The above code is a slight modification, of simple demo found here: 

You can find the coordinates to use in ‘area’ tag above by using a Image Mapper software.
For eg

The image used for the above example is:


One response

  1. Working!!! Thanks a lot!!!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Get every new post delivered to your Inbox.

%d bloggers like this: