图像上的工具提示

Question

我有一个图像，上面有徽标（它是地图），我想在用户将鼠标移到该徽标上时弹出一个小框，其中包含有关徽标位置的信息。

我可以在不使用JavaScript框架的情况下执行此操作吗？如果可以，是否有任何小型库/脚本可以让我执行此操作？

Answer 1

是的，您可以在没有Java脚本的情况下执行此操作。 使用具有标题属性的HTML图像映射，如下所示：

<img usemap="#logo" src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png">
<map name="logo">
<area shape="rect" href="" coords="52,42,121,65" title="Stack">
<area shape="rect" href="" coords="122,42,245,65" title="Overflow">
</map>

堆栈溢出徽标是指图像映射 ，该图像映射使用area标签为两个单词中的每个单词定义一个矩形。 每个area标签的title元素都指定浏览器通常显示为工具提示的文本。 shape属性还可以指定圆形或多边形。

Answer 2

title属性是最简单的解决方案，并且可以保证正常工作， 并且对于不正确支持它的用户代理，可以适当地降级。

Answer 3

单凭一张图像并不能为浏览器提供其中徽标的语义信息。 您可以使用图像地图来提供坐标。 要获得工具提示，只需将title属性应用于每个链接。 对于更复杂的工具提示（例如样式，多行等），您将需要非标准的工具，例如UniTip 。

Answer 4

MooTools为此提供了一个漂亮的脚本。 请参阅MooTools技巧 。 HTML也很轻巧。

这是1.11版本的演示 。

Answer 5

确实，mootools是众多框架之一
允许您向任何元素添加功能
您的网页。 这里是一个小教程的链接。
http://mootorial.com/wiki/mootorial/08-plugins/03-interface/01-tips

Mootools并不是真正的复制粘贴类型的框架，
它鼓励您查看提供的代码，并
列举一些出色的示例，介绍您自己的解决方案。

Answer 6

您可以在http://www.taggify.net/上尝试javascript小部件。 脚本允许为图像的一部分添加工具提示-当用户将鼠标移到照片上的区域上时，脚本会弹出工具提示，在区域周围绘制边框并淡化其他部分。 在照片上标记人物的好东西。 参见http://www.taggify.net/demo.aspx上的演示

Answer 7

您可以将title属性用于简单的工具提示。 它适用于几乎所有DOM对象。