jQuery插件imagemapster没有做任何事情 [英] jQuery plugin imagemapster isn't doing anything

问题描述

我仍然是javascript和jQuery的新手，所以请记住，这可能是一个我看不到的明显解决方案。

I'm still relatively new to javascript and jQuery so keep in mind that it may be an obvious solution that I don't see.

我引用了jQuery和它适用于其他事情。也许imagemapster引用有问题？我在这里下载了它，我就像这样引用它。我也将imagemapster.min.js放入其中，但当两者都在其中时它不起作用，当它们中的任何一个单独使用时它都不起作用。

I referenced jQuery and it works fine for other things. Maybe there's something wrong with the imagemapster reference? I downloaded it here and I referenced it like this. I put the "imagemapster.min.js" in as well, but it doesn't work when both are in nor does it work when either of these are used by themselves.

<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，就像它们应该的那样。

I read the documentation and followed it almost exactly (see below), but it does literally nothing to the highlighting. Instead, it messes up their positioning a little bit which ruins the page, which makes no sense because mapster should have nothing to do with positioning. The clickable areas have also been shifted up and out of position. It doesn't even give any errors; the code just passes through and nothing happens except for what I said. And yes, the image maps I'm trying to highlight are fully functional and #downstairs, #upstairs, and #offices are indeed IDs of image tags like they're supposed to be.

$(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。他们三个都使用这种格式。

This is the html for the images and the maps. All three of them use this format.

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

推荐答案

检查您的地图区域是否已定义href。例如：href =＃

Check if your map areas have href defined. Ex: href="#"

这篇关于jQuery插件imagemapster没有做任何事情的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！