忽略图像中透明部分的鼠标交互并将其分配给下图
我有两张桌子,其中的图像部分是透明的,我想要 忽略这些部分上的鼠标交互(尤其是单击)并分配 单击下面另一个表中的图像。
(我希望你理解,因为英语不是我的母语。) 谢谢..
i have two tables with images that parts of them are transparent and i want
to ignore mouse interactions (especially clicking) on these parts and assign the
click to the image in the other table that below.
(i hope you understand because english is not my native language.)
thanks..
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
图像地图应该可以做到。
Image map should do it.
一种方法(尽管不一定是最有效的)是将顶部/单击的图像复制到画布上,并在其上查找用户单击的像素的颜色值。如果该像素的 alpha 值是透明的,则调用底层图像的 onclick(或者如果底层图像也自动获取单击事件,则返回 false,我不确定是否会)。不过,我不确定这样的处理需要多长时间。
更新:我刚刚实现了这个方法,将图像复制到画布并检查其像素没有明显的延迟。
One method, all though maybe not necessarily the most efficient, would be to copy your top/clicked image to a canvas and do a look up on it for the color value of the pixel where the user clicked. If the alpha value of that pixel is transparent, call the onclick of the underlying image (or just return false if the underlying image also gets the click event automatically, I'm not sure if it would or not). I'm not exactly sure how long such processing would take, though.
Update: I just implemented this method and there's no noticeable delay copying the image to the canvas and checking its pixel.
恐怕这不太可能。 HTML 元素的边界框是矩形的,即使对于具有透明度的元素也是如此。鼠标事件正是针对这个边界框而触发的。
该事件将通过父元素传播,因此如果您的其他元素是父元素之一,您仍然可以捕获单击事件,但它会为两个元素触发。
I'm afraid this is not likely to be possible. The bounding box for HTML elements are rectangular, even for elements with transparency. It is for this bounding box that mouse events fire on.
The event will propagate through the parent elements, so if your other element is one of the parents you can still capture the click event, but it will fire for both elements.