javascript - 如何使javascript在悬停和单击期间忽略透明图像区域

标签 javascript jquery html css

我找到了很多关于这个主题的帖子,但似乎没有一个能满足我的特定需求。我的最终目标是重现 Nike ID使用 html5、css3 和 javascript 基于 Flash 的自定义。

我的直接下意识 react 是将图像切成许多不规则形状的图像切片。然后使用一些图像编辑软件(photoshop 等)为每个图像切片创建额外的副本,每个副本具有不同的颜色配置文件。最后,我会以这样一种方式放置所有图像切片,它们将重新组合原始图像,有点像拼图游戏。

这就是我碰壁的地方。每个这样的图像切片的不规则形状的本质将导致其某些区域是透明的。更复杂的是,其中一些透明区域必然位于底层图像切片的事件切片区域上方,从而防止后者注册悬停和单击鼠标操作。当然,有很多关于如何让 javascript 忽略透明区域的帖子。但是,我还没有找到一种解决方案,其中透明区域真正表现为透明,从而允许底层图像注册鼠标交互。

那么问题来了,有没有办法让透明区域真正透明?还是我完全错了?

如有任何建议,我们将不胜感激!谢谢。

最佳答案

这可以通过 <map> 实现和 <area> 标签。

http://www.image-maps.com/允许您上传图像并为您生成 HTML 代码。您需要做的就是拖动特定区域。

关于javascript - 如何使javascript在悬停和单击期间忽略透明图像区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25152193/

相关文章:

javascript - 在文本输入框中添加html链接?

javascript - Chrome 开发工具,谁在设置高度/宽度?

javascript - 如何使用phaser让html5游戏在移动设备浏览器上运行?

javascript - 将选定单选按钮的值保存到字典中

jquery - JQuery中有计时功能吗?

jquery排序json对象

javascript - Mobile Safari - 滚动到元素

javascript - 如果工作,为什么这个 javascript 不与 else 一起使用?

Javascript 使动画变慢?

html - CSS - "Return"过渡不工作