Alt-Web Design & Publishing
jQuery MapHighlight for Image Maps

Description:

Mouse over the diamond shaped image map below. Hotspot regions are highlighted by jQuery's MapHighlight plugin (no additional images required).

Diamond hotspot 1 hotspot 2 hotspot 3 hotspot 4 hotspot 5 hotspot 6 hotspot 7

Method:

Download the MapHighlight.js file from GitHub and save it to your local site folder.

How I survived a computer disaster

 

Spam Filter - Free Trial

Reference jQuery Scripts

Insert the following between the <head> and </head> tags of your HTML document:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript" src="PATH-to-file/maphighlight.js"></script>

<!--maphighlight function code-->

<script type="text/javascript">
$(function() {
$('img[usemap]').maphilight();
});

</script>

 

 



Lunarpages.com Web Hosting

HTML Code for Image Map:

<p><img src="PATH-to-file/Diamond.png" alt="Diamond" width="379" height="361" border="0" usemap="#Map" />

<map name="Map" id="Map">
<area shape="poly" coords="97,24,57,41,97,57,266,57,304,41,265,25" href="#" alt="hotspot 1" title="hotspot 1" />
<area shape="poly" coords="54,46,23,72,91,103,94,63" href="#" alt="hotspot 2" title="hotspot 2"/>
<area shape="poly" coords="101,64,98,105,266,105,262,65" href="#" alt="hotspot 3" title="hotspot 3"/>
<area shape="poly" coords="274,102,270,64,308,49,338,77" href="#" alt="hotspot 4" title="hotspot 4" />
<area shape="poly" coords="31,88,88,117,151,283" href="#" alt="hotspot 5" title="hotspot 5" />
<area shape="poly" coords="101,113,261,113,185,327,101,113" href="#" alt="hotspot 6" title="hotspot 6" />
<area shape="poly" coords="275,110,335,87,226,275" href="#" alt="hotspot 7" title="hotspot 7" />
</map>

</p>

 

To customize maphighlight.js, change these values:

F.fn.maphilight.defaults={
fill:true,fillColor:"00CC00",
fillOpacity:0.3,
stroke:true,
strokeColor:"99FF33",
strokeOpacity:0.5,
strokeWidth:2,

 

    bookmarks