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

【问题标题】：Unable to display multiple tooltips on a single image无法在单个图像上显示多个工具提示
【发布时间】：2012-12-18 02:56:04
【问题描述】：

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

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

按钮.按钮 { 颜色：#fff;背景：#000；字体大小：.8em；字体粗细：粗体；字体系列：Verdana、Arial、Helvetica、sans-serif；边框：实心 1px #ffcf31; }
.tooltip{
背景：透明网址（~/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"。我想在同一张图片上映射其他坐标。

我想知道我应该进行哪些更改以适应映射其他坐标！

【问题讨论】：

标签： jquery html imagemap

【解决方案1】：

你可能想看看这个答案：

Using JQuery hover with HTML image map

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

Image Mapster

【讨论】：