程序员经验分享-hwhale

如何使绝对定位的图像区域图可以用鼠标点击？

2024-02-04

我使用绝对定位将多个图像放置在彼此之上。这些图像是部分透明的，并且有一个 htmlarea and map仅使可见部分可点击。在 jQuery 中，我已将鼠标事件附加到area tags.

这对于一张图像非常有效：mouseenter 和 mouseleave 仅在输入图像的映射部分时触发。

问题是它只适用于顶部图像。对于所有其他人，它不会触发事件，CSS 悬停也不起作用，因为它上面还有另一个图像。尽管事实上areas 不重叠并且maps 在图像前面。

这是问题的演示：http://markv.nl/stack/imgmap2/ http://markv.nl/stack/imgmap2/


您可以将单个完全透明的图像放置在所有单独图像的顶部，并将所有图像映射区域附加到该图像。它将充当鼠标事件的捕获元素，并且您仍然可以更改所有单个图像。

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

javascript

jQuery

MouseEvent

imagemap

如何使绝对定位的图像区域图可以用鼠标点击？ 的相关文章

  • 如何共享 Swagger 文档

    我最近开始使用 Swagger 来编写文档 但有一些事情我仍然不清楚 我创建了 YAML 文档 现在我希望能够与团队的其他成员共享 pdf 或 HTML Javascript 页面中的文档 我无法使用 SwaggerHub 因为它们没有私有

  • 为什么这个 JavaScript 可以在 Safari 上运行，但不能在 Firefox 上运行？

    我有 HTML 文件 我在 Safari 上尝试了该代码 运行良好 但是当我在 Firefox 上尝试这个时 它不起作用 任何人都可以建议如何使其在 Firefox 上工作吗 单击撤消按钮时 我想从 jsp 文件中检索内容 当我在 mac

  • jQuery show() 和 hide() 的更流畅替代方案

    我有一个带有隐藏列的页面设置 使用 jQuery show 和 hide 函数将列滑入和滑出 然而 它有点 笨重 并且在显示 隐藏时看起来不太流畅 相比之下 我还有一个使用 jquery UI 手风琴的页面部分 当在这些部分之间切换时 过渡

  • 如何在html中创建字体选择栏

    我想创建一个下拉菜单 在其中我们可以看到所有可用的字体 并且可以选择我们选择的任何字体 我还想创建一个字体颜色选择小部件 存在大量的字体样式 我想知道如何获取所有这些字体以及如何创建一个小部件 用户可以使用该小部件选择他选择的颜色 为了创建

  • 异步 JS 加载到 head 中

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

  • 代理递归函数

    想象一个简单的递归函数 我们试图包装它以检测输入和输出 A simple recursive function const count n gt n 1 count n 1 Wrap a function in a proxy to ins

  • 在 Angular JS 中撤消重做

    我有一个大对象排列在 rootScope 中 比如说 gt 100 个对象 每个对象又具有对象 数组的层次结构 我想使用 deepWatching watch 整个 rootScope 即将 watch 的第三个参数设置为 TRUE 但这里

  • CKEDITOR.styleSet.add - 'a' 元素的新样式

    由于某种原因如果我改变 p to a 它不再出现在样式列表中 有什么理由吗 CKEDITOR stylesSet add default name Wys wiersza 1 element p styles line height 18p

  • 使用 ECMA 脚本向节点（页面）添加新属性

    我需要在页面激活时向页面添加属性 我决定建立一个工作流程 在激活步骤之前执行相同的操作 我的自定义工作流程步骤 激活步骤之前的步骤 使用 ECMA 脚本来实现此目的 这是我到目前为止所拥有的 var workflowData granite

  • Javascript for 循环跳过最后一个元素

    我有一个数组 根据某些条件从中删除某些元素 当我删除元素时 我会重新启动 for 循环 因为索引已刷新 var k for k 0 k lt this j data length k if condition true this j dat

  • Jasmine 单元测试不等待承诺解析

    我有一个有角度的服务 它具有像这样的异步依赖项 function angular module app factory myService q asyncService function q asyncService var myData

  • 验证动态添加的输入字段

    我用过this http docs jquery com Plugins Validation以下表单的 jquery 验证插件

  • 如何使用 Soundcloud api 将流传输到 html5 音频播放器中？

    我刚刚开始学习 javascript 作为我的第一次尝试 我想创建自定义音频播放器 它使用 soundcloud 的 api 作为音乐源 到目前为止 这就是我的设置

  • 处理照片上传的最佳方式是什么？

    我正在为一个家庭成员的婚礼制作一个网站 他们要求的一个功能是一个照片部分 所有客人都可以在婚礼结束后前往并上传他们的照片 我说这是一个很棒的想法 然后我就去实现它 那么只有一个问题 物流 上传速度很慢 现代相机拍摄的照片很大 2 5 兆 我

  • 如何优化 Three.js 中多个 sphereGeometry 的渲染？

    我想优化 Three js 中 sphereGeometry 的渲染 因为它成为我的程序的瓶颈 javascript程序如下所示 var sphereThree for var idSphere 0 idSphere lt numSpher

  • 通过均匀分布值来有效合并两个数组

    我见过许多问题 答案主题是通过交替值合并两个数组 他们是这样工作的 let array1 a b c d let array2 1 2 let outcome a 1 b 2 c d 但我希望输出更加高效 并且根据数组大小均匀分配值 exp

  • React 嵌入脚本标签不可样式化

    我打算将 SurveyMonkey 调查嵌入到我的网站中 用 React 制作 只是让它工作起来很麻烦 但最终这段代码工作了 let script let extractScript

  • 通过 Ajax 加载内容

    好的 我对 ajax 和从外部加载内容还很陌生 如果您能深入了解我的问题 我将不胜感激 我目前有一个空的隐藏 div 单击链接后应在其中加载 ajax 内容 div div 我目前有一个链接列表 它们都具有相同的类 我希望在单击时 空白 d

  • JavaScript 开关（真）

    你好 我正在尝试处理 ajax json 响应 这是我的代码 success function j switch true case j choice1 alert choice2 break case j choice2 alert ch

  • Fancybox修改。如何修改 fancybox 以停止在每个画廊的最后一项？ （画廊 1 画廊 2 等）[重复]

    这个问题在这里已经有答案了 我正在为我的照片库使用 fancybox 插件 我有多个包含更多项目 照片 的画廊 我想知道如何在点击每个画廊的最后一个项目时停止幻灯片放映 我的 fancybox js 没有被修改 谢谢 您需要添加该选项loo

随机推荐

热门标签