Basic
Basic

Simple page

Corporate
Corporate

corporate

E-shop
E-shop

eshop

Thursday, 23 August 2012 11:25

Maphighlight script with inversed highlighting support

 After many hours of finding out how this plugin is implemented i desided that the best way would be to modify the core in order to support such a thing. But how to achive it? I created an extra option called "inverseFill", if it is enabled each of the canvas object of the map is actually not faded. This check is made and by using the option "alwaysOn" so it must be enabled. 

After that proccess everything is working as expected , the mouseover fades the canvas and Voila we have a reversed MapHightlight plugin.

The implementation is very simple and all that you need to do is set the inverseFill along with alwaysOn to true.

 
$('#image img').maphilight({ 
 fill: true,
 fillColor: '000000',
 fillOpacity: 0.2,
 stroke: true,
 strokeColor: 'cacaca',
 strokeOpacity: 0.5,
 strokeWidth: 1,
 fade: true,
 alwaysOn: true,
 neverOn: false,
 groupBy: false,
 wrapClass: true,
 inverseFill: true, //must have alwaysOn true
 shadow: true,
 shadowX: 0,
 shadowY: 0,
 shadowRadius: 6,
 shadowColor: '000000',
 shadowOpacity: 0.8,
 shadowPosition: 'outside',
 shadowFrom: false
 });
 

 

A simple demo!

 

You can download the modified script along with the demo bellow!

Not to forget, many thanks to David Lynch for this plugin!

Read 17933 times Last modified on Wednesday, 05 September 2012 12:29
Tagged under
Download attachments:

Related items

More in this category: « Spacegallery script with Links How to Display Twitter Posts with the new 1.1 Api - jQuery script »

Leave a comment

back to top