0

私のコードの冗長性を許してください... jqueryを使用して、内部にいくつかのボタンコントロールを含むポップアップ画像を作成しようとしていました。

これが私がこれまでに試したことです：CSSコード：

button.button { color: #fff; 背景: #000; フォントサイズ: .8em; font-weight:太字; font-family: Verdana、Arial、Helvetica、sans-serif; ボーダー: 実線 1px #ffcf31; }
.tooltip{
background:transparent url(~/Box.png); 表示:なし;
高さ:180px;
パディング:0px 0px 10px 30px; 幅:320px;
フォントサイズ:14px;
色:#000; オーバーフロー:自動; ボーダー:2px ベタ黒; }

Javascript コード:

    $(document).ready(function () {
        $("#Harmful_id").tooltip({
            offset: [10, 2],
            effect: 'slide'
        });
    });
    function replyclick(a) {
        var e = document.getElementById(a);
        if (!e) return true;
        if (e.style.display == "none") {
            e.style.display = "block";
        } else {
            e.style.display = "none"
        }
        return true;
    }

HTML コード:

<img id="continuum" src= "~/abc.png" alt="" usemap="#JQTooltip" style="width: 766px; height: 397px; border:0px"/>
    <map id="JQTooltip_map" name="JQTooltip">
    <area shape="rect" id="Harmful_id" coords="98,158,189,215" href="#" alt="" title=""/></map><div class="tooltip">
     <button type="button" class="button" id="btn1" onclick="replyclick('view1');"><b>1.</b></button><b onclick="replyclick('view1');"><u>Definition</u></b><div id="view1" style="display:none">Bla bla bla</div>

これは、イメージ マップの 1 つの部分、つまり coords="98,158,189,215" に対してのみ機能します。同じ画像に他の座標もマッピングしたいと思います。

他の座標のマッピングに対応するには、どのような変更を加える必要があるか知りたいです!

4

1 に答える 1

0

この答えを見たいと思うかもしれません：

HTML イメージ マップでの JQuery ホバーの使用

具体的には、このプラグインは非常に堅牢で、多くの優れた機能を備えているようです。

画像マップスター

于 2013-01-03T17:47:03.777 に答える