Question

请原谅我的冗余代码...我正在尝试使用jquery创建弹出窗口中包含一些按钮控件的图像。

这是我到目前为止所尝试的内容： CSS代码：

button.button               {                  颜色：#fff;背景：＃000;                   font-size：.8em;                   字体重量：粗体;                   font-family：Verdana，Arial，Helvetica，sans-serif;                   border：solid 1px＃ffcf31;               }   .tooltip {
      background：透明网址（〜/ Box.png）;                   显示：无;
                  高度：180像素;
                  填充：0px 0px 10px 30px;                   宽度：320像素;
                  字体大小：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 code：

<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”。我想在同一图像上映射其他坐标。

我想知道我应该做些什么改变以适应其他坐标的映射！

Answer 1

你可能想看看这个答案：

Using JQuery hover with HTML image map

具体来说，这个插件看起来非常强大，并且有很多很酷的功能：

Image Mapster

无法在单个图像上显示多个工具提示

1 个答案: