单击具有更高z-index的图像下方的内容 [英] Clicking content below image with higher z-index
问题描述
我使用jquery和幻灯片插件创建了一个滑块。我想创建一个效果，看起来滑块是圆形的，所以我将一个带有透明圆形中心的图像放在滑块上方，具有更高的z-index。您可以在此处查看一个有效的示例： http://vitaminjdesign.com/example/examples/Standard /index.html
我遇到的问题是你无法点击滑块内的任何内容，因为掩模图像具有更高的z-index比其他内容。我希望能够点击标题区域内的链接以及整个幻灯片。有没有人对如何解决这个问题有任何好的想法？
我不能给.caption一个比掩码更高的z-index，因为那样你会看到上面的背景传递圆形面具。但我需要能够在图像蒙版的透明区域内单击。有什么想法吗？
@ JCHASE11我不认为我会向任何人推荐这个...我只是在我做的时候不得不这样做看到了你的解决方案..它只是..令人窒息......但是..图像映射怎么样？ - http://jsfiddle.net/u9cYZ/
<哈哈......我开始对此有了第二个想法..但它确实可以用图像映射。
结束测试它以确保我不仅仅是投掷围绕不起作用的想法.. http://jsfiddle.net/u9cYZ/3/ （在此示例IE获取值img位置：相对;从某个地方将其搞砸了......现在已经太晚了我上床睡觉了）
所以解决方案还是有点..狡猾..但这次它只会覆盖想要的区域..
这有点像风管磁带的想法..但是，我当时认为你可以在那里的某个地方放一个空的< a> ，然后更换 href 以匹配当前可见图像。
I have created a slider using jquery and the slides plugin. I wanted to create an effect where it looks like the slider is circular shaped, so I positioned an image with a transparent circular center absolutely above the slider, with a higher z-index. You can see a working example here: http://vitaminjdesign.com/example/examples/Standard/index.html
The problem I have having is that you cannot click on anything within the slider, because of the "mask image" which has a higher z-index than the rest of the content. I want to be able to click on the links within the caption area, as well as the entire slide. Does anybody have any good ideas on how to solve this issue?
I cannot give .caption a higher z-index than the mask because then you would see the background pass above the circular mask. BUT I need to be able to click within the transparent area of the image mask. Any ideas?
@JCHASE11 I didnt think i would ever suggest this to anyone.. I just had to do it when i saw your solution.. its just.. suffocating.. but.. how about image mapping? - http://jsfiddle.net/u9cYZ/
Hah.. I started having second thoughts about this.. but it is indeed doable with image map.
Ended up testing it to make sure that im not just throwing around ideas that wont work.. http://jsfiddle.net/u9cYZ/3/ ( In this example IE gets value img position: relative; from somewhere which screws it up and..It's too late I'm off to bed )
So the solution is still a little.. crafty.. but this time it would only cover the wanted area..
This is a bit of a duct tape idea.. But, I was thinking that you could put an empty <a> in there somewhere, on top of the mask of course and change the href to match the current visible image.
这篇关于单击具有更高z-index的图像下方的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
