9

我有一张图片，上面有徽标（这是一张地图），当用户将鼠标移到所述徽标上时，我希望弹出一个小框，其中包含有关该徽标位置的信息。

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

4

7 回答 7

9

是的，你可以在没有 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标签为两个单词中的每一个定义一个矩形。每个area标签的title元素指定浏览器通常显示为工具提示的文本。该shape属性还可以指定圆形或多边形。

于 2008-08-24T18:24:07.343 回答
7

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

于 2008-08-24T17:27:44.237 回答
5

单独的单个图像不会为浏览器提供内部徽标的语义信息。您可以使用图像映射来提供坐标。要实现工具提示，只需title对每个链接应用一个属性。对于更复杂的工具提示（例如样式、多行等），您需要一些非标准的东西，例如UniTip。

于 2008-08-24T16:35:42.737 回答
4

MooTools 有一个漂亮的脚本。请参阅MooTools 提示。HTML 也是轻量级的。

这是 1.11 版本的演示。

于 2008-08-24T16:40:08.670 回答
3

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

Mootools 并不是真正的复制粘贴类型的框架，
它鼓励您查看提供的代码并
通过一些优秀的示例推出自己的解决方案。

于 2008-10-06T09:10:09.870 回答
2

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

于 2009-03-12T16:11:57.297 回答
1

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

于 2015-09-01T12:41:01.287 回答