图像上的工具提示

时间:2008-08-24 16:32:34

标签: javascript html

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

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

7 个答案:

答案 0 :(得分:8)

是的,你可以不用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徽标引用image map,它使用area标记为两个单词中的每个单词定义一个矩形。每个area标记的title元素指定浏览器通常显示为工具提示的文本。 shape属性还可以指定圆或多边形。

答案 1 :(得分:7)

title属性是最简单的解决方案,并且保证可以正常工作,可以正常降级为不能正确支持它的用户。

答案 2 :(得分:5)

仅单个图像不会向浏览器提供其中徽标的语义信息。您可以使用image map来提供坐标。要实现工具提示,只需将title属性应用于每个链接即可。对于更复杂的工具提示(例如样式,多行等),您需要非标准的内容,例如UniTip

答案 3 :(得分:4)

MooTools有一个漂亮的脚本。见MooTools Tips。 HTML上也很轻量级。

这是1.11版本的demo

答案 4 :(得分:3)

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

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

答案 5 :(得分:2)

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

上的演示

答案 6 :(得分:1)

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