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

Posted 2023-04-13

【中文标题】无法在单个图像上显示多个工具提示

【英文标题】：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"  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="#"  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"。我想在同一张图片上映射其他坐标。

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

【参考方案1】：

你可能想看看这个答案：

Using JQuery hover with HTML image map

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

Image Mapster