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

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

===============>>#1 票数:8 已采纳

是的,您可以在没有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元素都指定浏览器通常显示为工具提示的文本。 shape属性还可以指定圆形或多边形。

===============>>#2 票数:7

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

===============>>#3 票数:5

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

===============>>#4 票数:4

MooTools为此提供了一个漂亮的脚本。 请参阅MooTools技巧 HTML也很轻巧。

这是1.11版本的演示

===============>>#5 票数:3

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

Mootools并不是真正的复制粘贴类型的框架,
它鼓励您查看提供的代码,并
列举一些出色的示例,介绍您自己的解决方案。

===============>>#6 票数:2

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

===============>>#7 票数:1

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

  ask by Teifion translate from so

未解决问题?本站智能推荐:

1回复

带按钮和图像的工具提示

我正在尝试创建一个带按钮的工具提示(就像LinkedIn一样)。 这是我到目前为止所尝试的:(但是从这里开始) .tooltip{ display: inline; color:black; position: relative; top:200px; } .tooltip
1回复

图像映射翻转和工具提示

我需要1)在鼠标悬停时更改不透明度以突出显示悬停区域,以及2)添加简单的工具提示以显示悬停区域的详细信息。 可能吗? 有没有可以让我同时做的jquery插件。 非常感谢您的帮助!
1回复

JQuery UI工具提示:每个工具提示具有不同的图像

我是JavaScript的新手,如果这是一个愚蠢的问题,请原谅。 我试图为每个工具提示显示不同的图像。 jQuery UI进行了设置,因此其中的文本是图像的名称。 在下面查看我的代码: HTML: 的JavaScript
2回复

图像上的工具提示

我正在使用工具提示。 但我希望在图像标记上,就像我将鼠标移到图像上时,工具提示应该可以工作。 我试过但不是在图像标签上为我工作。
1回复

带有文字和图像的工具提示(javascript / css / html)

我想将文本和图像合并在一组tooldtips中,作为文本放置在每个工具提示框中图像的旁边。 任何想法将不胜感激。 提前致谢。
1回复

鼠标悬停图像地图上的工具提示

我目前正在研究2种功能; 我为图像创建了一个图像映射,并希望是否有人将鼠标悬停在图像的这一部分上,该部分将在右侧显示价格,并在鼠标下方显示“发现”或类似内容的工具提示。 现在我有以下 但是,存在一些问题: 如果客户未将鼠标悬停在该区域,价格不会消失 我无法显示工
1回复

显示工具提示以及所选项目的图像

当用户在选择菜单中的每个选项上单击鼠标时,我试图显示带有图像的工具提示。 这是我的选择项: 谁能帮忙?
1回复

图像悬停工具提示无法正常工作

我目前遇到问题,您可以在此处检查。 如果将鼠标悬停在徽标上,您将看到一个工具提示。 可以,但是 如果您使用Firefox进行尝试,则工具提示会卡在徽标下方(正确) 如果您使用Chrome浏览器进行尝试,则工具提示会跟随鼠标(错误) 我怎样才能解决这个问题? 我正在使用
2回复

如何在工具提示中显示图像?

当您将鼠标放在链接上时,我想在工具提示中显示图像。 我正在使用HTML,CSS和JAVASCRIPT / JQUERY。 我将图像保存在一个文件夹中,因此我从本地主机引用了它。 我试图通过JQuery设置工具提示的内容: 而且我尝试以纯HTML设置工具提示的内容: 然后
2回复

具有不同叠加/工具提示的图像映射

所以我对编码总体上比较新,我想我可以在这里寻求帮助。 我为图片创建了一个图像映射。 不同的部分应显示不同的叠加或语音泡泡工具提示,其中固定位置位于悬停区域(带文本)和可点击链接旁边。 但我不知道如何正确地做到这一点。 基本上是一个交互式指令。 我的第一次尝试在编辑器中对我来