Нажатие на контент под изображением с более высоким z-индексом

Я создал слайдер с помощью jquery и плагина слайдов. Я хотел создать эффект, при котором слайдер имеет круглую форму, поэтому я расположил изображение с прозрачным круговым центром абсолютно над слайдером с более высоким z-индексом. Здесь вы можете увидеть рабочий пример: http://vitaminjdesign.com/example/examples/Standard/index.html

Проблема, с которой я столкнулся, заключается в том, что вы не можете щелкнуть что-либо внутри ползунка из-за «изображения маски», которое имеет более высокий z-индекс, чем остальной контент. Я хочу иметь возможность нажимать ссылки в области заголовков, а также на весь слайд. Есть ли у кого-нибудь хорошие идеи, как решить эту проблему?

Я не могу дать .caption более высокий z-index, чем маска, потому что тогда вы увидите, что фон проходит над круговой маской. НО мне нужно иметь возможность щелкать в прозрачной области маски изображения. Любые идеи?


jquery css z-index css-position
person JCHASE11    schedule 18.08.2011    source источник

Ответы (3)


arrow_upward
3
arrow_downward

@ JCHASE11 Я не думал, что когда-нибудь предложу это кому-нибудь ... Мне просто пришлось это сделать, когда я увидел ваше решение ... это просто ... душно ... но ... как насчет сопоставления изображений? - http://jsfiddle.net/u9cYZ/

Ха ... Я начал задумываться об этом ... но это действительно выполнимо с картой изображений.

Закончил тестирование, чтобы убедиться, что я не просто разбрасываю идеи, которые не работают .. http://jsfiddle.net/u9cYZ/3/ (В этом примере IE получает значение img position: relative; откуда-то, что портит его и .. Слишком поздно, я ложусь спать)

Так что решение все еще немного ... хитро ... но на этот раз оно охватит только желаемую область ...

Это что-то вроде идеи изоленты ... Но я подумал, что вы можете поместить туда пустой <a>, конечно, поверх маски и изменить href, чтобы он соответствовал текущему видимому изображению.

person Joonas    schedule 18.08.2011
comment
это работает очень хорошо, и я впервые испортил карты изображений. Это нормальная практика? - person JCHASE11; 19.08.2011
comment
@ JCHASE11 Совершенно нормально, хотя, если я не ошибаюсь, они не будут проверять строгий тип документа. Но это не должно быть проблемой. Их чаще всего используют для карт и карт только в наши дни, но на самом деле все идет. Также w3.org/TR/html40/struct/objects.html # h-13.6 - person Joonas; 19.08.2011
comment
@ JCHASE11 Да, и просто ... если вы используете Chrome ... он не показывает область в инструментах разработчика в виде круга, как это делает Firebug. (Легче редактировать область, когда вы ее действительно видите.) - person Joonas; 19.08.2011

arrow_upward
2
arrow_downward

Кажется, что ваш слайдер возвращает 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');
            }
        }
    });

});
person Webars    schedule 18.08.2011
comment
это именно то направление, которое я ищу. Я пробовал использовать этот код, и, похоже, он не работает в текущем порядке. Я загрузил это по ссылке выше, чтобы вы могли видеть. Похоже, при нажатии на маску ничего не происходит. - person JCHASE11; 18.08.2011

arrow_upward
1
arrow_downward

Вместо того, чтобы использовать один div для замаскированного изображения, я разделил его на 6 Div, каждый из которых имеет свою позицию фона. (см. изображение) введите описание изображения здесь

См. http://vitaminjdesign.com/example/examples/Standard/index.html для обновленного примера.

person JCHASE11    schedule 18.08.2011
comment
Неплохая идея, но это сработает только в том случае, если добавить ссылку в самом верху ее возможной позиции. - person Webars; 18.08.2011
comment
Ага! он никогда не будет в более низком положении, потому что заголовок будет усечен - person JCHASE11; 18.08.2011