图像上的工具提示

Question

我有一个图像，上面是徽标（这是一张地图），当用户将鼠标移到所述徽标上时，我想要一个小盒子弹出窗口，其中包含有关该徽标位置的信息。

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

Answer 1

是的，你可以不用Javascript就可以做到这一点。使用带有标题属性的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>

Stack Overflow徽标是指图片地图，使用 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-插件/ 03-接口/ 01-提示

Mootools实际上不是一种复制粘贴类型的框架，
它鼓励您查看提供的代码和
用一些很好的例子来推广你自己的解决方案。

Answer 6

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

Answer 7

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