I have been able to get ImageMapster to work on SharePoint 2010 just by using the generic function of $('img').mapster();. I am able to hover and click without issues. However as soon as I try to work in mapkey as in mapKey: state especially but no limited to "selecting" an area nothing works from ImageMapster. ( no hovers or anything ).
What am I doing wrong or have missed that SharePoint needs to recognize mapKey , selected, and for that matter tooltip?
The code below works perfectly on a local browser of Dreamweaver ( mapKey and selected work fine ) but as soon as I place that code in SharePoint ( with mapKey rerferences, it stops working ) remove the mapKey references and the generic hovers and click work. However, I have yet been able to get select or tooltip to work on SharePoint.
Any help would be greatly appreciated, I have racked my brain and scored the web for a week now.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script type="text/javascript" src="http://www.outsharked.com/scripts/jquery.imagemapster.js"></script>
img src="../SP FP1/3rdFloor.png" alt="" width="1028" height="446" usemap="#ThirdFloor" id="ThirdFloor"/
//removed tag off img src to avoid missing image
<area href="#"state="3200" full="3200" shape="rect" coords="102,36,149,83">
<area href="#"state="3210" full="3210" shape="rect" coords="150,34,181,85">
<area href="#"state="3220" full="3220" shape="rect" coords="197,38,223,64">
<area href="#"state="3230" full="3230" shape="rect" coords="223,35,245,63">
<area href="#"state="3240" full="3240" shape="rect" coords="196,62,219,85">
<area href="#"state="3250" full="3250" shape="rect" coords="222,62,248,85">
<script type="text/javascript"> $('img') .mapster({ fillColor: 'ff0000', fillOpacity: 0.3, stroke: true, strokeWidth: 2, strokeColor: 'ff0000', mapKey: 'state', areas : [{key : '32--', selected : true},{key : '3210', selected : true},{key : '3220', selected : true, fillColor: '00ff00', stroke: true, strokeWidth: 2, strokeColor: 'ff0000'}], }); </script>