Highlights the Image map using JQuery
This code snippet is explained about highlights the image map objects on mouse over.
This code snippet is explained about highlights the image map objects on
mouse over. I tried to highlight the area through applying styles,
but it's not working. When i search on google about, highlight the
map i got a complete example using JQuery. If you want the same
then this snippet is very useful to you.Steps:
Step1:
Add the following javascript file to your project folder and
link to your aspx page like this,
<script type="text/javascript" src="NewJs/jquery-1.js"></script>
<script type="text/javascript" src="NewJs/jquery_002.js"></script>
<script type="text/javascript" src="NewJs/jquery.js"></script>Step2:
Create these javascript function for initializing JQuery and
highlight the selected map point.
<script language="javascript" type="text/javascript">
var oldDataObject = null;
function pageLoad()
{
$('.map').maphilight();
}
function SetSelection(myObj)
{
if(oldDataObject != null)
{
var data = $(oldDataObject).data('maphilight') || {};
data.alwaysOn = false;
$(oldDataObject).data('maphilight', data).trigger
('alwaysOn.maphilight');
}
var data = $(myObj).data('maphilight') || {};
data.alwaysOn = true;
$(myObj).data('maphilight', data).trigger
('alwaysOn.maphilight');
oldDataObject = myObj;
}
</script>
The "pageLoad()" funciton used for initializing the map point based on ".map" class.
The "setSelection(myObj)" function is used for highlight the selected map point. The .data function is set the JQuery property to that particular object. Step3:
Then design the image map and set the onclick property to
all area tags like this,
'area shape="poly"
coords="172,51,184,32,217,27,236,27,254,45,274,59,284,71,299,72,318
,63,334,66,346,79,343,98,322,115,316,125,318,137,328,151,313,157,29
0,151,273,148,282,145,269,142,259,139,244,146,235,157,221,154,188,1
33,191,105,203,83,188,95,206,78,189,98,199,78" href="#" onclick="javascript:SetSelection('#'+this.id);" id="JammuKashmir" alt="Jammu Kashmir" title="Jammu" class="{alwaysOn:false,stroke:true,
strokeColor:'F02528',fillColor:'F02528',strokeWidth:2,fillOpacity:1
,fill:false}"'
Refer this site for all JQuery properties,
http://davidlynch.org/js/maphilight/docs/
Using "Dream Weaver" we can easily draw the rect, poly, circle.
Herewith i attached the complete sample application and screen
shot of working with dream weaver. Please download and post your
feed backs.
Reference: http://davidlynch.org/js/maphilight/docs/
Attachments
its nice da superb
keep coding