Javascript 图像地图浏览器兼容性和imagemapster

我使用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>

$（文档）.ready（函数（）{
$（“#瀑布”）.mapster({
singleSelect:true，
单击导航：true，
填充：是的，
fillColor:'000000'，
填充不透明度：0.5，
});
});

如果您在Chrome中运行它，单击将导致图像周围出现轮廓，您将看到多边形的大小正确。但是，在悬停时不会发生任何事情。在Firefox中，悬停会导致较暗的多边形出现，但它们太小了

任何建议都将不胜感激。谢谢你

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


在Firefox中，它显然不太关心这些东西，它正在加载，但是图像映射与显示图像的大小不匹配

图像本身为1024x72像素。您将以650x72像素显示它。默认情况下，ImageMapster假定imagemap与图像的本机大小匹配，因此，将您提供的贴图缩小约40%

有几种方法可以解决这个问题

您可以提供与本机图像匹配的imagemap，并让ImageMapster完成它的工作
您可以调整图像大小以匹配现有的imagemap和显示大小
可以使用“缩放贴图”选项禁用贴图缩放功能：

你没有悬停的css？我需要吗？我使用的是imagemapster，它可以自动完成，我不认为图像映射支持悬停。我从来没有使用过这个工具b4。我总是在dreamweaver中制作图像映射，但我希望使用悬停css。imagemapster是一个插件，可以为您执行悬停操作，因为不支持在图像映射中的某个区域上悬停。如果你在firefox中打开这个演示，你会看到它工作正常——刚好在错误的区域上——我看到了问题所在。是这样的吗？也许在小提琴中就是这样。我昨天有个家伙，他无法在localhost上运行他的视频，但现场直播很好。非常感谢你的帮助！现在一切都很好：）我意识到我使用了一个不好的链接，并找到了一个更好的链接。你真的为我节省了很多时间，谢谢！
scaleMap: false