HTML
<script type="text/javascript" src="http://davidlynch.org/projects/maphilight/jquery.maphilight.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.maph').maphilight({ fill: false, stroke: true, strokeWidth: 4, strokeColor: 'bebfc1', fillColor: 'ffe400', fillOpacity: 0.6 });
jQuery( "area" ).mouseenter(function(){
jQuery(this).data('maphilight', {
fill: true,
fillColor: '99cc00',
fillOpacity: 0.2,
stroke: true,
strokeColor: '99cc00',
strokeOpacity: 1,
strokeWidth: 4,
fade: true,
alwaysOn: true,
neverOn: false,
groupBy: false,
wrapClass: true,
shadow: false,
shadowX: 0,
shadowY: 0,
shadowRadius: 6,
shadowColor: '000000',
shadowOpacity: 0.8,
shadowPosition: 'outside',
shadowFrom: false
}).trigger('alwaysOn.maphilight');
//check if area wasnt already selected - otherwise gets buggy
if( !jQuery(this).hasClass('selected') ){
jQuery('.selected').data('maphilight', {
fill: false,
fillColor: '',
fillOpacity: 0.6,
stroke: false,
strokeColor: '',
strokeOpacity: 1,
strokeWidth: 4,
fade: true,
alwaysOn: true,
neverOn: false,
groupBy: false,
wrapClass: true,
shadow: false,
shadowX: 0,
shadowY: 0,
shadowRadius: 6,
shadowColor: '000000',
shadowOpacity: 0.8,
shadowPosition: 'outside',
shadowFrom: false
}).trigger('alwaysOn.maphilight');
jQuery('area').removeClass('selected');
jQuery(this).addClass('selected');
}
});
});
</script>
<img class="maph" src="http://stroyinvestufa.ru/i/cam_verh_11.jpg" usemap="#Map" border="0" />
<map name="Map" id="Map">
<area shape="poly" coords="393,67,441,48,493,64,496,88,497,114,389,118,385,92" class="area1" href="#stolkovo" />
<area shape="poly" coords="278,165,380,128,378,104,329,85,273,78,224,113,231,143" class="area2" href="#stolkovo" />
<area shape="poly" coords="49,159,115,118,190,122,236,148,241,179,110,228,61,191" class="area3"...