Image link not working with overlayed div when z-index is higher

Question

I'm using supersized slideshow on a site but I have added a texture overlay in a div

 #slideshow-wrapper
{
    width: 100%;
    margin: -100px 0 0 0;
    padding: 0;
    height: 500px;
    background: url(/slideshow/img/slideshow-front-3.png) repeat;
    position: relative;
    z-index: 3;
}

this is the supersized div

 #supersized
{
    display: block;
    position: absolute;
    left: 0;
    top: -15px;
    overflow: hidden;
    z-index: 1;
    height: 500px;
    width: 100%;
}

If I change the z-index on #slideshow-wrapper to 0 the link works great however I loose the texture over the image.

Is there a workaround for this so the link can work while still displaying the textured overlay?

Appreciate any help.

Cheers

score 0 · Answer 1 · answered Jan 21 '13 at 06:44

0

You'll need to put an event listener on the texture image and capture the mouse coordinates, then pass along the click event to the item below it which should have been clicked, which shares the same coordinate space.

answered Jan 21 '13 at 06:44

AlienWebguy

76,997
17
122
145

Will this work for several images/links that rotate underneath the #slideshow-wrapper? – user1516788 Jan 21 '13 at 07:40
Sure, you can use jquery and easily find the offset, though at the end of the day, you should decide if the texture effect is really worth all this trouble. – AlienWebguy Jan 21 '13 at 07:56
can you try adding transparent at end of background css beside repeat. – Khurram Ishaque Jan 21 '13 at 09:15
Hi, thanks for your help. The transparent at end of background didn't work. I might look into the event listener. The images just look so good with the texture :-) so it's worth maybe giving it a shot. Cheers – user1516788 Jan 21 '13 at 09:43
check this if it helps: http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements there r many solutions on this page. – Khurram Ishaque Jan 21 '13 at 12:18
Thanks Khurram for the link – user1516788 Jan 22 '13 at 04:51

Image link not working with overlayed div when z-index is higher

1 Answers1