图像上的工具提示

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

Answer 2

该title属性是最简单的解决方案,保证可以正常工作,并且对于不能正确支持它的用户,可以优雅地降级.

Answer 3

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