文章/答案/技术大牛

发布

社区首页 >问答首页 >用于图像地图区域形状上工具提示的Jquery

问用于图像地图区域形状上工具提示的Jquery
EN

Stack Overflow用户

提问于 2014-09-04 10:51:55

回答 1查看 8.9K关注 0票数 6

我利用我找到的一些jquery示例，为图像映射在悬停时创建了一个定制工具提示。

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

<script>
    $(function() {
        $( document ).tooltip();
    });
</script>


<img src="http://blahblahblah" alt="HTML Map" border="0" usemap="#image" class="map"/>

<map name="image">
    <area shape="rect" coords="19, 138, 177, 161" title="Popup Message" />
    <area shape="rect" coords="19, 178, 314, 192" title="Another Popup Message" />
    <area shape="rect" coords="23, 203, 304, 217" title="A Third Popup Message" />
</map>

<label for="userid">Your userid:</label><input id="userid" title="This Popup Message Appears in the Right Place">

当我在图像地图区域上盘旋时，它会弹出屏幕左上角的工具提示，而不是鼠标指向的地方。每个形状都出现在相同的位置。

对于其他元素，比如我在图片下面包含的" label“演示，工具提示就出现在标签上，它应该在哪里。

我尝试过基于我在这里看到的添加位置信息，但是我添加的任何内容要么没有效果，要么就会使代码无效，而我什么也得不到。如果我添加此职位信息，则不会有任何更改：

$( document ).tooltip({ 
    my: "right center", at: "right center" 
});

图像地图区域的工具提示仍然只显示在整个页面的左上角。当我尝试使用其他的位置参数时，它删除了整个过程，因此没有任何工具提示。

有什么想法吗？

更新：

即使没有任何位置参数，它也为页面上的任何其他元素、输入表单、搜索表单、“编辑”按钮等提供了正确的功能。出现了正确的jquery工具提示样式，它与这些元素相邻，无论它们在页面的何处。

它只是出现在其他地方的图像地图区域矩形上。因此，它识别区域形状足以触发工具提示，但没有将工具提示与其相邻。

更新II

我发现jsquery小部件似乎只在块元素上正确操作(并且area不是块元素)，然后偶然发现一个帖子似乎证实了这一点，请参见这里的响应#5。。我已经尝试过添加CSS样式，将"area“定义为一个块元素，在使用了更多内容并更改了相当大的位置之后，我想出了一些有用的东西：

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

<style>
   area {
   display: inline-block;
   }
</style>

<script>
    $(function() {
    $( document ).tooltip({position: {at: "center-675 center-450"}});
    });
</script>


<img src="http://blahblahblah" alt="HTML Map" border="0" usemap="#image" class="map"/>

<map name="image">
    <area shape="rect" coords="19, 138, 177, 161" title="Popup Message" />
    <area shape="rect" coords="19, 178, 314, 192" title="Another Popup Message" />
    <area shape="rect" coords="23, 203, 304, 217" title="A Third Popup Message" />
</map>

这把工具提示放在图像的中心，这很好，我不需要他们准确地在那里的人点击，只是可见和不太远。我不知道为什么需要负675，但它有效。

javascript

jquery

css

jquery-ui

回答 1

Stack Overflow用户

发布于 2014-09-04 11:27:00

我认为您需要添加position作为第一个选项，第二个问题可能是在html之前执行js，将jquery脚本移到这里的例子末尾。

$(function() {
  $( document ).tooltip({ position: { my: "right center", at: "right center" } });
});

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/25663606

复制

相似问题

问用于图像地图区域形状上工具提示的Jquery
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用于图像地图区域形状上工具提示的JqueryEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用于图像地图区域形状上工具提示的Jquery
EN