javascript - Image map browser compatibility and imagemapster -

javascript - Image map browser compatibility and imagemapster -

i'm using imagemapster modify image map on hover. however, i'm encountering issues both image map , imagemapster plug in. problems are:

1) though i've defined height , width image, size seems alter across browsers. in chrome, defined polygons perfect size, in firefox way small.

2) reason, imagemapster plugin not working in chrome.

below code:

<script type="text/javascript"> $(document).ready(function() { $('#waterfall').mapster({ singleselect: true, clicknavigate: true, fill: true, fillcolor: '000000', fillopacity: 0.5, }); }); </script> <div class="chartmap"> <img id="waterfall" src="waterfall_diagram/waterfall.png" width="650" height="72" usemap="#water" alt="waterfall methodology map"> <map name="water"> <area shape="poly" coords="6,3,72,3,96,37,72,69,4,69,30,37,6,3" href="waterfall_project_initiation.html" alt="project initiation"> <area shape="poly" coords="75,3,165,3,188.5,37,164,69,74,69,100,37,75,3" href="waterfall_demand_management.html" alt="demand management"> <area shape="poly" coords="167,3,236.5,3,261,37,236.5,69,167,69,192,37,167,3" href="waterfall_definition.html" alt="definition"> <area shape="poly" coords="240,3,326,3,350,37,326,69,240,69,264,37,240,3" href="#" alt="requirements analysis"> <area shape="poly" coords="329,3,380,3,405,37,380,69,329,69,353,37,329,3" href="#" alt="design"> <area shape="poly" coords="384,3,430,3,455,37,430,69,384,69,408,37,384,3" href="#" alt="build"> <area shape="poly" coords="434,3,483,3,509,37,484,69,433,69,458,37,434,3" href="#" alt="test"> <area shape="poly" coords="487,3,557,3,583,37,558,69,488,69,511,37,487,3" href="#" alt="deployment"> <area shape="poly" coords="561,3,621,3,646,37,621,69,561,69,586,37,561,3" href="#" alt="closure"> </map> </div>

here's demo: http://jsfiddle.net/t6k8x/5/

if run in chrome, click cause outlines come around image , see polygons right size. however, nil occur on hovering should. in firefox, hovering cause darker polygons appear, way small.

any suggestions much appreciated. give thanks you!!!

in chrome imagemapster not loading. see script errors:

refused execute script 'https://raw.githubusercontent.com/jamietre/imagemapster/ e08cd7ec24ffa9e6cbe628a98e8f14cac226a258/dist/jquery.imagemapster.min.js' because mime type ('text/plain') not executable, , strict mime type checking enabled.

in firefox, apparently cares less stuff, loading, image map not match size @ displaying image.

the image 1024x72 pixels. displaying @ 650x72 pixels. imagemapster, default, assumes imagemap matches native size of image, , result, scaling map provided downwards 40%.

there several ways prepare this.

you can provide imagemap matches native image, , allow imagemapster thing. you can resize image match existing imagemap & display size. you can disable map scaling functionality scalemap option:

http://jsfiddle.net/lgfn7/

scalemap: false

javascript jquery html css imagemapster