Clicking content below image with higher z-index

2
votes

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?

3
jquerycssz-indexcss-position

3 Answers

3
votes

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

2
votes

It seems, that your slider returns false, when a click on a link occurs. So give much attention to the next line in the code window.location.href = myLink.attr('href');

$('#slides #mask').click(function (e) {

    // user click coordinates
    var cursorPosX = e.pageX;
    var cursorPosY = e.pageY;

    $('#slides .caption a').each(function () {
        var myLink = $(this);

        // coordinates of the link at the moment
        var linkPosLeft = myLink.offset().left;
        var linkPosTop = myLink.offset().top;

        // parameters of the link
        var linkWidth = myLink.width() + linkPosLeft;
        var linkHeight = myLink.height() + linkPosTop;

        // compare...
        if ( cursorPosX >= linkPosLeft && cursorPosX <= linkWidth ) {
            if ( cursorPosY >= linkPosTop && cursorPosY <= linkHeight ) {
                window.location.href = myLink.attr('href');
            }
        }
    });

});
1
votes

Instead of using one div for the masked image, I split it up into 6 Divs each having their own background position. (see image)enter image description here

Please see http://vitaminjdesign.com/example/examples/Standard/index.html for updated example.