Совместимость браузера с картой изображений и imagemapster

Question

Я использую ImageMapster, чтобы просто изменить карту изображения при наведении курсора. Однако я сталкиваюсь с некоторыми проблемами как с моей картой изображений, так и с плагином imagemapster. Мои проблемы:

1) Несмотря на то, что я определил высоту и ширину для своего изображения, его размер в браузерах меняется. В Chrome определенные полигоны имеют идеальный размер, но в Firefox они слишком малы.

2) По какой-то причине плагин ImageMapster не работает в Chrome.

Ниже мой код:

<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>

Вот демоверсия: http://jsfiddle.net/t6K8X/5/

Если вы запустите его в Chrome, щелчок приведет к появлению контуров вокруг изображения, и вы увидите, что полигоны имеют правильный размер. Однако при зависании ничего не произойдет, как должно. В Firefox при наведении курсора будут появляться более темные полигоны, но они будут слишком маленькими.

Любые предложения очень ценятся. Спасибо!!!

Answer 1

1. В Chrome ImageMapster не загружается. Смотрите ошибки скрипта:

   Refused to execute script from        
   'https://raw.githubusercontent.com/jamietre/ImageMapster/
      e08cd7ec24ffa9e6cbe628a98e8f14cac226a258/dist/jquery.imagemapster.min.js' 
   because its MIME type ('text/plain') is not executable, 
   and strict MIME type checking is enabled. 
   

2. В Firefox, который, видимо, меньше заботится об этом, он загружается, но карта изображения не соответствует размеру, при котором вы отображаете изображение.

Само изображение имеет размер 1024х72 пикселей. Вы отображаете это в 650x72 пикселей. По умолчанию ImageMapster предполагает, что карта изображений соответствует исходному размеру изображения, и в результате масштабирует предоставленную вами карту примерно на 40%.

Есть несколько способов исправить это.

1. Вы можете предоставить карту изображений, которая соответствует исходному изображению, и позволить ImageMapster делать свое дело.
2. Вы можете изменить размер изображения в соответствии с вашим существующим изображением и размером дисплея.
3. Вы можете отключить функцию масштабирования карты с помощью опции scaleMap:

http://jsfiddle.net/LgFn7/

scaleMap: false