By clicking on the image below with a higher z-index

Question

I created a slider using jquery and a slide plugin . I wanted to create an effect when it looks like a circular slider, so I positioned the image with a transparent circular center absolutely above the slider with a higher z-index. Here you can see a working example: http://vitaminjdesign.com/example/examples/Standard/index.html

The problem I am facing is that you cannot click on anything in the slider due to the “mask image” which has a higher z index than the rest of the content. I want to be able to click links in the title bar, as well as the entire slide. Does anyone have any good ideas on how to solve this problem?

I cannot give .caption a higher z-index than a mask, because then you will see a background pass above the circular mask. BUT I need to be able to click in the transparent area of ​​the image mask. Any ideas?

Answer 1

@ JCHASE11 I did not think that I would ever offer this to anyone. I just needed to do this when I saw your solution .. its just .. suffocating .. but .. how about mapping? - http://jsfiddle.net/u9cYZ/

Ha .. I had other thoughts about this .. but it really is doable with the image map.

, , , . http://jsfiddle.net/u9cYZ/3/ ( IE img position: relative, -, ... )

, - .. .. .

---

. , <a> -, , , href .

Answer 2

, false, . 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');
            }
        }
    });

});

Answer 3

, div , 6 Div, .  (. )

See http://vitaminjdesign.com/example/examples/Standard/index.html for more details .