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

在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与图像的 native 大小匹配，因此，将您提供的地图缩放约40％。

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

您可以提供与原始图像匹配的图像映射，并让ImageMapster执行其操作。
您可以调整图片大小以匹配现有的imagemap＆amp;显示尺寸。
您可以使用 scaleMap 选项禁用地图缩放功能：

http://jsfiddle.net/LgFn7/

scaleMap: false

图像映射浏览器兼容性和imagemapster

1 个答案: