У меня есть панель меню с эффектами зависания, и теперь я хочу поместить прозрачное изображение с кругом и "handdrawn" текст над одним из пунктов меню. Если я использую абсолютное позиционирование, чтобы поместить надлежащее изображение над пунктом меню, пользователь не сможет нажать кнопку, и эффект зависания не будет работать.
Можно ли каким-либо образом отключить взаимодействие мыши с этим оверлейным изображением, чтобы меню продолжало работать так же, как раньше, даже если оно находится под изображением?
Edit:
Поскольку меню было создано с помощью joomla, я не мог настроить только один из пунктов меню. И даже если бы я мог, я не чувствовал, что решение javascript было подходящим. Поэтому в конце я "пометил" пункт меню стрелкой вне элемента элемента меню. Не так хорошо, как хотелось бы, но в любом случае все это сработало.
Лучшее решение, которое я нашел, это CSS Styling:
#reflection_overlay {
background-image:url(../img/reflection.png);
background-repeat:no-repeat;
width: 195px;
pointer-events:none;
}
pointer-events работает очень хорошо и прост.
Дайте кнопке более высокое свойство z-index, чем рисованное изображение:
<img src="hand_drawn_image.gif" style="z-index: 4">
<a href="#" style="z-index: 5"></a>
однако убедитесь, что вы проверяете его во всех основных браузерах. IE интерпретирует z-индекс по-разному от FF. Чтобы кто-нибудь придумал более подробную информацию, вам нужно будет опубликовать дополнительную информацию, лучше всего будет ссылка.
Итак, я сделал это, и он работает в Firefox 3.5 в Windows XP. Он показывает коробку с некоторым текстом, наложением изображения и прозрачным div выше, который перехватывает все клики.
<div id="menuOption" style="border:1px solid black;position:relative;width:100px;height:40px;">
sometext goes here.
<!-- Place image inside of you menu bar link -->
<img id="imgOverlay" src="w3.png" style="z-index:4;position:absolute;top:0px;left:0px;width:100px;height:40px;" \>
<!-- Your link here -->
<a href="javascript:alert('Hello!')" >
<div id="mylinkAction" style="z-index:5;position:absolute;top:0px;left:0px;width:100px;height:40px;">
</div>
</a>
</div>
Что я сделал: Я создал div и определил его как вариант меню, размер которого равен 100x40px (произвольное значение, но это помогает с иллюстрацией образца).
У div есть наложение изображений и наложение ссылок. Ссылка содержит размер div, который будет таким же, как div 'menuOption'. Таким образом, щелчок пользователя захватывается во всей ячейке.
При тестировании вам нужно будет предоставить свое собственное изображение.:)
Протест: Если вы ожидаете, что ваша кнопка меню ответит на взаимодействие пользователя (например, изменив цвет, чтобы имитировать кнопку), тогда вам понадобится дополнительный код, прикрепленный к javascript, который вы будете вызывать на теге, этот дополнительный код может адресовать "menuOption", элемент через DOM и измените его цвет.
Кроме того, нет другого способа узнать, что вы можете принять событие click и зарегистрировать его под элементом под видимым элементом страницы. Я тоже пробовал это летом, и не нашел другого решения, кроме этого.
Надеюсь, что это поможет.
PS: Запись в событиях quirksmode прошла долгий путь, чтобы помочь мне понять, как события ведут себя в браузерах.
Основываясь на том, что сказал Пекка Гайзер, я думаю, что следующее будет работать. Взяв его пример и переработав его:
<a href="#" style="z-index: 5">
<!-- Place image inside of you menu bar link -->
<img src="hand_drawn_image.gif" style="z-index: 4">
<!-- Your link here -->
</a>
Здесь вы можете разместить событие на базовом a-теге и, если ваше изображение не имеет события, инициирует захват (! IE-браузеры), а затем убивает распространение события.
Если вам нужна дополнительная помощь, сообщите нам об этом немного подробнее.
Если изображение будет статически расположено, вы можете захватить событие клика из изображения, когда оно пузырится вверх, помещая метку img внутри элемента элемента меню.
<div onclick="menuclick()">
<img src="overlay.png" style="position:absolute;" />
</div>