0

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

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

button.button { 颜色：#fff; 背景：#000；字体大小：.8em；字体粗细：粗体；字体系列：Verdana、Arial、Helvetica、sans-serif；边框：实心 1px #ffcf31; }
.tooltip{
背景：透明 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 回答