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>
<html>
<head>
<meta charset=”utf-8″>
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js”></script&gt;
<script type=”text/javascript” src=”jquery.maphilight.js”></script>
<script type=”text/javascript”>$(function() {
$(‘.map’).maphilight();
});</script>

</head>
<body>

<table>
<tr>
<td>
<form>
<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>
</form>
</td>
<td><img src=”demo_simple.png” width=”420″ height=”300″ class=”map” usemap=”#simple”></td>
</tr>
</table>
<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”>
</map>
</p>

</body>
</html>

The JavaScript Library is available here: https://github.com/kemayo/maphilight

The above code is a slight modification, of simple demo found here: http://www.jquery4u.com/image-scripts/highlight-image-map-area-hotspots-jquery/ 

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:

demo_simple

About these ads

One response

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

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: