Home/ Questions/Q 6343253
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T20:24:07+00:00

I have created a slider using jquery and the slides plugin . I wanted

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    @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.

    • 0