HTML、jQuery:在图像映射区域显示文本

2024-01-13

我有一个像这样的图像映射:

<img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map> 

我使用 jQuery 将跨度附加到区域,但没有机会显示区域上的任何内容。

有没有什么方法可以在区域上显示文本,例如工具提示,但无需将鼠标悬停在页面加载时,在区域上显示文本?

谢谢你的帮助。


添加跨度时,请使用以下内容:

(未测试)

jQuery('map_div').append('span').text('Mercury').css({position:'absolute', left:'10px',top:'10px',z-index:'1'})

您可能还需要将 z-index 应用于这些跨度下方的任何 div

另一种选择是设置一个具有适当边距的相对定位 div:

jQuery('map_div').append('span').text('Mercury').css({position:'relative', margin-left:'-20px',margin-top:'-20px'})

我倾向于根据上下文使用这些方法。

这是一个工作example http://jsfiddle.net/zAJvx/2/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML、jQuery:在图像映射区域显示文本 的相关文章

  • 动态更改复选框不会触发onChange?

    注意 jQuery 不是一个选项 我想检测复选框状态的变化 但是当我这样做时 onChange 事件似乎没有触发 document getElementById myCheckBox addEventListener change func
  • 在 Select2 标签文本区域中创建新标签

    我有一个输入 文本区域 其中应用了 Select2 的标签 因此 当用户输入我的数据库中存在的项目名称时 它会显示匹配项目的列表 用户可以选择一个项目并创建一个标签 这是到目前为止我的基本标签功能的代码 usualSuppliers sel
  • 可以将自己的属性添加到 HTML 元素中吗? [复制]

    这个问题在这里已经有答案了 可能的重复 自定义属性 是还是不是 https stackoverflow com questions 992115 custom attributes yay or nay HTML 标签上的非标准属性 好东西
  • 使用 HTML 文本预填充 Gmail 撰写屏幕

    我发现要打开 Gmail 撰写屏幕 您必须登录并打开以下链接 替换变量填充撰写表单上的相应位置 但是 如果我想输入正文多行文本或换行符 即使我对它进行 urlencode 它也不起作用 这里有什么想法吗 检查您的 UrlEncode 方法是
  • 如何添加从 Outlook 到 Web 表单的拖放上传功能?

    我正在寻找一种方法 允许用户以简单的方式将 Outlook 电子邮件上传到基于 Web 的系统 我可以让它以手动方式为用户工作 他们可以将电子邮件从 Outlook 拖放到桌面上 这会创建一个 msg 文件 这非常有效 尤其是 电子邮件中是
  • 如何从 Python 返回 JSON 值?

    我从如下所示的 jQuery 文件发送 ajax 请求 该请求需要 JSON 格式的响应 jQuery ajax url Control getImageDetails file id currentId type GET contentT
  • div 全宽的响应式背景图像

    我正在尝试弄清楚如何在 div 全宽和响应式中制作背景图像 背景图像在页面的宽度上扩展 并且具有响应性 但图像的高度不是其完整高度 似乎它被某种方式切断了 我正在使用引导框架 我尝试这样做的原因是我想在图像上覆盖一些文本 我尝试了很多不同的
  • 从 iframe 关闭父弹出窗口

    在domain1 com 上 我有一个链接 可以打开domain2 com 的弹出窗口 弹出窗口中有一个 iframe 也托管在 domain2 com 上 在 iframe 中 我试图关闭弹出窗口 我似乎对如何做到这一点感到困惑 在 if
  • 克隆元素对应表单中所有元素的事件

    我成功克隆了表行 其中包含从数据库检索的值 不过我对它没有什么问题 我对所有元素使用了类 因为克隆会重复 ID 不会出现问题 因为它无法唯一地定位每个元素 使每个元素 行在这里唯一的方法是什么 功能如何工作 当第一次选择框时 所选 ID 的
  • 异步 JS 加载到 head 中

    我需要将脚本异步加载到页面上 我正在使用createElement方法在头部动态插入脚本标签 发生的事情是首先加载页面源 完成后 头部中包含的所有元素都会并行加载 一旦全部加载完毕 我动态添加的脚本就会加载 这在逻辑上是有道理的 但我正在寻
  • 计算div标签内img标签的数量

    我的代码是这样的 div img src some image png img src some image png div class another div div div class another div div div 我想计算该
  • 我可以阻止history.popstate在初始页面加载时触发吗?

    我正在开发一个通过 AJAX 提供内容的网站 如果您单击菜单中的某个项目 内容 div 会更新为 get回应 没什么花哨的 我正在实施history pushState允许使用浏览器的后退 前进按钮进行导航 我有以下内容可以在历史导航上加载
  • Jquery .scrollTop() 不工作

    标题解释了我的问题 这是我的代码 my div ul scrollTop my div ul 0 scrollHeight my div 使用 AJAX 填充 因此 在我的 ajax 请求中 我有一个执行上述代码的成功回调 ajax url
  • 如何使用 Soundcloud api 将流传输到 html5 音频播放器中?

    我刚刚开始学习 javascript 作为我的第一次尝试 我想创建自定义音频播放器 它使用 soundcloud 的 api 作为音乐源 到目前为止 这就是我的设置
  • PHP:如何使用 nl2br() 和 HTML Purifier 保持换行?

    Issue 使用时HTML 净化器 http htmlpurifier org 为了处理用户输入的内容 换行符不会被转换为 br tags 考虑以下用户输入的内容 Lorem ipsum dolor sit amet This is ano
  • 交换两个文本框的值

    我有两个文本框值 var pickup txt pickup var destination txt destination 我想交换这两个值 如下所示 pickup val destination val destination val
  • 如何使用 Ajax 在 Flask 中发布按钮值而不刷新页面?

    我有一个问题 当我单击 Flask 应用程序中的按钮时 我想避免重新加载 我知道有 Ajax 解决方案 但我想知道如何将我的按钮链接到 ajax 函数以发布按钮值并运行链接到其值的 python 函数 这是我的 html 按钮 div di
  • 如何使用jquery点击眼睛图标时显示和隐藏密码

    我需要在单击眼睛图标时显示和隐藏用户密码 因此我为此编写了脚本 当我单击眼睛图标时 只有类正在更改 但密码不可见 再次单击斜线眼睛图标 它应该隐藏这两个图标方法不起作用如何解决这个问题
  • 如何使用 jQuery 检测浏览器是否关闭

    我需要使用 jQuery 检测浏览器是否被关闭 如果是这样 则执行一个事件 我的网站上有一个聊天功能 很像 Facebook 可以让用户在导航到网站结构中的其他页面时保持登录状态 但如果他们单击 则需要将他们从聊天中注销 这样他们就不会在线
  • 如何在输入时格式化 contenteditable div?

    我正在尝试编写一个函数 允许 contenteditable div 在用户输入 div 时执行一些自动格式化 到目前为止我只能让它在 IE 中运行 有人可以帮助我吗 function formatOnKeyUp if window get

随机推荐