1

私のjavascriptの基礎は非常に貧弱であると言って序文にしたいと思います。これは基本的に私が解決しようとした最初の複雑な問題なので、ここでの問題が明白な構文の無知である場合、私は驚かないでしょうが、優しくしてください.

そこで、Imagemapster を使用して、イメージマップでホバー効果を実行しています。また、イメージマップのさまざまな領域をクリックしてポップアップを開きたいのですが、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>

その 1 つの class="fancybox" ビジネスは私のテスト領域です。その目的は、その領域をクリックすると、href で指定された画像が fancybox ポップアップで開くことです。

JavaScript で onClick からすべてを省略した場合、Imagemapster は正常に動作します。現在、imagemapster は動作せず、リンクも機能しますが、通常のリンクのように画像を開くだけで、ポップアップは表示されません。

手がかりはありますか？

4

0 に答える 0