jQuery插件imagemapster没有做任何事情

我还是比较新的JavaScript和jQuery，所以请记住，它可能是一个明显的解决方案，我没有看到。jQuery插件imagemapster没有做任何事情

我引用了jQuery，它适用于其他事情。也许有imagemapster参考有问题吗？我下载了它here，我这样引用它。我也把“imagemapster.min.js”放在里面，但是当它们都在使用时它不起作用，或者当它们中的任何一个单独使用时它都不起作用。

<script type="text/javascript" src="../SiteAssets/css/jquery.imagemapster.js"></script> 
<script type="text/javascript" src="../SiteAssets/css/jquery.imagemapster.min.js"></script>

我阅读文档，并且遵循它几乎一模一样（见下文），但它几乎一无所有，突出显示。相反，它会弄乱它们的位置，导致页面遗失，这是毫无意义的，因为mapster应该与定位无关。可点击的区域也已经上移并脱离了位置。它甚至不会给出任何错误;代码只是通过了，除了我所说的之外什么都没有发生。是的，我试图强调的图像映射功能完全，＃downstairs，#upstairs和#offices确实是像它们应该是图像标记的ID。

$(document).ready(function() 
{ 
    $('#downstairs').mapster({ 
     fillOpacity: 0.5, 
     mapKey: 'alt', 
     isSelectable: false, 
     render_highlight: 
     { 
      fillColor: '2aff00' 
     } 
    }); 

    $('#upstairs').mapster({ 
     fillOpacity: 0.5, 
     mapKey: 'alt', 
     isSelectable: false, 
     render_highlight: 
     { 
      fillColor: '2aff00' 
     } 
    }); 

    $('#offices').mapster({ 
     fillOpacity: 0.5, 
     mapKey: 'alt', 
     isSelectable: false, 
     render_highlight: 
     { 
     fillColor: '2aff00' 
     } 
    }); 
});

这是图像和地图的html。他们三人都使用这种格式。

<div style="position:static;left:0px;top:0px"> 
<img id="downstairs" alt="downstairs" class="map" usemap="#downmap" style="visibility:visible;z-index:3; left: 10px; top: 54px;" 
    src="sourceHere" width="1000" /> 
<map name="downmap" id="downmap"> 
    <!-- There is a large list of areas here that follow this format--> 
    <area title="Portable 1" onclick="somefunction" coords="198,81,223,117" /> 
</map> 
</div>

来源

2012-11-05 Baga Jr.

您应该使用'jquery.imagemapster.js'或'jquery.imagemapster.min.js'，但不能同时使用。第二个是相同代码的“缩小版”，用于生产，而不是用于开发和测试。也就是说，将JS代码放入CSS目录是不合逻辑的。 – Blazemonger

我怀疑是这样，但即使只使用其中一种，它也不起作用。我不知道为什么，但我校的每个人都出于某种原因将他们的JavaScript和CSS的东西放在这个文件夹中。 –

如果您的JavaScript控制台中没有错误，那么我可以看到两种可能性：选择器不起作用，或插件不起作用。由于您使用的是$（document）.ready'，您确定具有这些ID的元素是否存在且属于正确的类型（'img'而不是'map'）？ – Blazemonger

当我第一次尝试ImageMapster时，我没有正确设置路径。您的区域路径必须从上到下环绕对象，然后从左到右，然后从下到上，直到它在开始时再次相遇。一旦我做到了，ImageMapster“做了些什么”。在我拥有正确的道路之前，看起来好像什么都没有发生。您也必须告诉image使用map。

<div id="mapblock"> 
    <img id="map_image" src="/images/map.png" usemap="#map_map"/> 
    <map name="map_map"> 
     <area data-key="AZ" full="item" href="#" coords="... " shape="poly" /> 
    </map> 
</div>

此外，您在代码中使用的编号应该是一个image的ID，而不是地图的ID。

此外，请确保您的地图区域在图像中（您可能必须设置图像的width，您知道），否则悬停效果将不会显示。当我第一次尝试时，直到我确定我的区域位于正确的位置之前，我什么也没有看到。

我写了一个mini-tutorial here用于通过Photoshop和Illustrator生成image-map。这对我来说工作得非常好，而image-map完全是完美的地方。

[OP发布HTML图像映射后]

<area title="Portable 1" onclick="somefunction" coords="198,81,223,117" />

啊，你COORDS多的比赛，我想。把这些坐标想象成一条线。您已经描述了该行的开头加上另一个点 - 您必须告诉它做一个完整的循环。试试这个，看看会发生什么：

“COORDS = “198,81，223117，198,81”

来源

2012-12-12 19:19:24 bgmCoder

是的，我告诉图像使用地图，图像地图工作完美，没有imagemapster。你能澄清一下你认为这个区域路径的意思吗？因为我根本不理解它？ –

我的意思是：第一个x和y坐标必须与最后一个相同。我还会在我的回答中添加更多的细节。 – bgmCoder

啊，你似乎已经加了两次jQuery。你只需要添加一个 - 只需要.min版本就可以正常工作。我认为加两次可能会搞砸了。 – bgmCoder

检查您的地图区域具有HREF定义。例如：href =“＃”

来源

2014-06-10 14:18:32

非常感谢您的回答。你救了我再次失去了一天又疯了。 – Mike

我有类似的问题，直到我将我的脚本移动到地图下。我无法在文档中找到它，但我记得读到插件工作时，图像必须先加载。您仍然想要在头部调用插件，但是您希望在图像映射之后放置JavaScript。

来源

2015-05-04 20:39:56 droo46

jQuery插件imagemapster没有做任何事情

回答

相关问题