1

我想先说我的 javascript 基础非常差。这基本上是我尝试解决的第一个复杂问题，所以如果我的问题是明显的语法无知，我不会感到惊讶，但请保持温和。

所以我使用 Imagemapster 在 imagemap 中做一些悬停效果。我还想在图像地图的各个区域单击以打开一个弹出窗口，我在放弃 Highslide 后尝试使用 Fancybox-2 执行此操作。

我知道通常 Imagemapster 会禁止单击区域的操作将其用作链接，并且要禁用此操作，您需要手动插入一些内容以达到以下效果：

image.mapster({
    fillOpacity: 0.0,
    isSelectable: true,
    singleSelect: true,
    mapKey: 'data-name',
    showToolTip: true,
    onClick: go
});

而且我已经看到有人将其用于以下条件的代码片段：

function go (data) {
    if (this.href && this.href !== '#') {
        window.open(this.href);
    }
}

因此，通过以有意义的方式打破这一点的过程，我一直试图将fancybox的调用插入到这个“go”函数中，认为这也许是我的问题的关键。然而，目前，我的突破都没有产生太多的洞察力，就像我说的那样，我对 javascript 的了解还不够，无法理解我的问题所在。

这是我目前的代码：

（隐式包含 jquery、fancybox 和 imagemapster 的所有内容）

    <script>
$(document).ready(function () {
    $('#leoweb').mapster({
        singleSelect: true,
        render_highlight: {altImage: 'img/open.jpg'},
        mapKey:'hex',
        fill: true, 
        altImage: 'img/open.jpg',
        fillOpacity : 1,
        onClick: go
    }); 
});

function go (data) {
    $(".fancybox").fancybox();
};
</script>

    <map name="leoweb" id="leoweb">
    <area hex="1" class="fancybox" rel="image" title="hex" href="img/hex1.png" shape="poly" coords=" 463,73, 363,74, 305,160, 363,258, 462,255, 513,168, 465,76" />
    <area hex="2" href="#" shape="poly" coords=" 579,196, 521,292, 578,384, 675,388, 733,294, 683,200, 585,198" />
    <area hex="3" href="#" shape="poly" coords=" 243,202, 138,202, 86,293, 133,379, 245,382, 295,293, 251,206, 245,206" />
    <area hex="4" href="#" shape="poly" coords=" 353,330, 304,419, 361,513, 461,508, 513,413, 461,324, 354,328" />
    <area hex="5" href="#" shape="poly" coords=" 229,450, 142,451, 83,542, 133,638, 239,636, 296,538, 245,452, 239,450, 235,450, 233,450" />
    <area hex="6" href="#" shape="poly" coords=" 453,575, 355,574, 303,664, 351,764, 460,765, 515,672, 459,577, 457,576" />
    <area hex="7" href="#" shape="poly" coords=" 573,453, 521,550, 574,638, 681,638, 737,550, 685,450, 577,452" />
</map>

那一个 class="fancybox" 业务是我的测试区域，目的是当我单击该区域时，href 指定的图像会在fancybox 弹出窗口中打开。

如果我在javascript中省略了onClick on的所有内容，Imagemapster就可以正常工作。目前，imagemapster 不起作用并且链接功能，但只是打开图像，就像它是常规链接一样，没有弹出窗口。

有什么线索吗？

4

0 回答 0