1

我正在使用 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 中，悬停会导致出现较暗的多边形，但它们会太小。

任何建议都非常感谢。谢谢！！！

4

1 回答 1

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 中，它显然不太关心这些东西，它正在加载，但图像映射与您显示图像的大小不匹配。

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

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

  1. 您可以提供与本机图像匹配的图像映射，并让 ImageMapster 完成它的工作。
  2. 您可以调整图像大小以匹配您现有的图像映射和显示大小。
  3. 您可以使用scaleMap选项禁用地图缩放功能：

http://jsfiddle.net/LgFn7/

scaleMap: false
于 2014-06-19T16:11:16.753 回答