Image Map Hover Over Area with ImageMapster jQuery not working

Question

I'm trying to create a hover area for a polygonal image map using the ImageMapster jQuery, but the hover over area isn't working. The image map works as it should, but the hovering effect won't work. I want each hexagon to change colour when you hover over it with the mouse.

Image Map Code:

<img id="Image-Maps-Com-image-maps-2014-03-26-105007" src="http://www.image-maps.com/m/private/0/vhiamh2cuht9c2tmik9galgrf7_testbg.jpg" border="0" width="594" height="299" orgWidth="594" orgHeight="299" usemap="#image-maps-2014-03-26-105007" alt="" />
<map name="image-maps-2014-03-26-105007" id="ImageMapsCom-image-maps-2014-03-26-105007">
<area shape="rect" coords="592,297,594,299" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_12288" />
<area id="Area One" alt="Area One" title="Area One" href="/areaone/" shape="poly" coords="58,3,167,1,223,96,169,188,59,190,5,95" style="outline:none;" target="_self"     />
<area id="Area Two" alt="Area Two" title="Area Two" href="/areatwo/" shape="poly" coords="230,99,339,99,394,193,340,287,230,288,175,193" style="outline:none;" target="_self"     />
<area id="Area Three" alt="Area Three" title="Area Three" href="/areathree/" shape="poly" coords="403,2,509,2,567,96,511,189,403,190,350,96" style="outline:none;" target="_self"     />
</map>

Map code with ImageMapster jQuery

<script type="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.imagemapster.js"></script>

<img id="Image-Maps-Com-image-maps-2014-03-26-105007" src="http://www.image-maps.com/m/private/0/vhiamh2cuht9c2tmik9galgrf7_testbg.jpg" border="0" width="594" height="299" orgWidth="594" orgHeight="299" usemap="#image-maps-2014-03-26-105007" alt="" />
<img src="http://www.image-maps.com/m/private/0/vhiamh2cuht9c2tmik9galgrf7_testcolour.jpg" style="display:none" />
<map name="image-maps-2014-03-26-105007" id="ImageMapsCom-image-maps-2014-03-26-105007">
<area shape="rect" coords="592,297,594,299" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_12288" />
<area id="Area One" alt="Area One" title="Area One" href="/areaone/" shape="poly" coords="58,3,167,1,223,96,169,188,59,190,5,95" style="outline:none;" target="_self"     />
<area id="Area Two" alt="Area Two" title="Area Two" href="/areatwo/" shape="poly" coords="230,99,339,99,394,193,340,287,230,288,175,193" style="outline:none;" target="_self"     />
<area id="Area Three" alt="Area Three" title="Area Three" href="/areathree/" shape="poly" coords="403,2,509,2,567,96,511,189,403,190,350,96" style="outline:none;" target="_self"     />
</map>

<script>
$(document).ready(function ()
{
    $('#sanitisationmap').mapster({
    singleSelect : true,
    clickNavigate : true,
    fill : true, altImage : 'http://www.image-maps.com/m/private/0/vhiamh2cuht9c2tmik9galgrf7_testcolour.jpg',
    fillOpacity : 1,
});
});
</script>

I'm sure it's something simple I'm missing. Here's the jfiddle .

I've also tried to see could I use CSS for this issue, but I've read on here that CSS doesn't really work properly with Image Maps. I've checked off some of the examples on the ImageMapster page and the Beginners site for it, but the hover over isn't working for me.

Answer 1

There appears to be some disconnect between the name of the image you're calling mapster on and the name of your actual image.

If you have only the one image on the page or would like the same script to execute on all images on the page, you can use:

$('img').mapster({ ... 

Otherwise, make sure you're using the same image name in your script as your HTML

As far as your jfiddle goes, link the jquery.imagemapster.js as an external resource and place your script block in the javascript panel. You can also omit the fist 2 script lines as these are not necessary.

I forked it here and got it working by doing the above