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

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

解决方案

回答

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

回答

MooTools为此提供了一个漂亮的脚本。请参阅MooTools提示。在HTML上也是轻量级的。

这是1.11版本的演示。

回答

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

回答

是的，我们可以在没有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"元素都指定了浏览器通常显示为工具提示的文本。形状属性也可以指定一个圆形或者多边形。

回答

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

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

回答

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