图片上的工具提示

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> 

堆栈上溢标志指image map，其定义为每个使用area标签的两个词的一个矩形。每个area标签的title元素指定浏览器通常显示为工具提示的文本。 shape属性也可以指定一个圆或多边形。

Answer 2

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

Answer 3

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

这里是1.11版本的demo。

Answer 4

title属性是最简单的解决方案，并保证能够正常工作，和对于不支持正确操作的useragents会优雅地降级。

Answer 5

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

MooTools是不是一个真正的复制粘贴式的框架，
它鼓励你过目提供的代码和
滚你一些很好的例子自己的解决方案。

Answer 6

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

Answer 7

您可以使用title属性获取简单的工具提示。它在几乎所有的DOM对象上都有作品。