Ігнорувати взаємодію миші з накладеним зображенням

У мене є рядок меню з ефектами наведення, і тепер я хочу розмістити прозоре зображення з колом та «намальованим рукою» текстом над одним із пунктів меню. Якщо я використовую абсолютне позиціонування, щоб розмістити накладене зображення над пунктом меню, користувач не зможе натиснути кнопку, і ефект наведення не працюватиме.

Чи є спосіб якимось чином відключити взаємодію миші з цим накладеним зображенням, щоб меню продовжувало працювати так само, як і раніше, навіть якщо воно знаходиться під зображенням?

Редагувати:

Оскільки меню було створено за допомогою joomla, я не зміг налаштувати лише один із пунктів меню. І навіть якби я міг, я не вважав рішення JavaScript відповідним. Тож врешті-решт я «позначив» пункт меню стрілкою поза елементом пункту меню. Не так приємно, як я хотів, щоб це було, але все одно це вдалося.

Найкраще рішення, яке я знайшов, - це CSS Styling:

#reflection_overlay {
    background-image:url(../img/reflection.png);
    background-repeat:no-repeat;
    width: 195px;
    pointer-events:none;
}

pointer-events атрибут працює досить добре і є простим.

Отже, я зробив це, і це працює у 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 'optionOption'. Таким чином клік користувача фіксується по всьому вікні.

Вам потрібно буде надати власне зображення під час тестування. :)

Застереження: якщо ви очікуєте, що кнопка меню реагує на взаємодію користувача (наприклад, зміна кольору на імітацію кнопки), то вам знадобиться додатковий код, прикріплений до javascript, який ви будете викликати на тезі, цей додатковий код може адресувати menuOption 'через DOM і змініть його колір.

Крім того, я не знаю по-іншому, що ви можете взяти подію клацання та зареєструвати її в елементі під видимим елементом сторінки. Я спробував це також цього літа, і не знайшов іншого рішення, крім цього.

Сподіваюся, це допомагає.

PS: Запис подій у quirksmode пройшов довгий шлях, щоб допомогти мені зрозуміти, як поводяться події у браузерах.

Надайте кнопці вищу властивість z-index, ніж намальоване від руки зображення:

<img src="hand_drawn_image.gif" style="z-index: 4">
<a href="#" style="z-index: 5"></a>

проте не забудьте протестувати його у всіх основних браузерах. IE інтерпретує z-індекс інакше, ніж FF. Щоб хтось придумав більше деталей, вам потрібно було б розмістити більше інформації, найкраще буде посилання.

Спираючись на те, що сказав Пекка Гайзер, я думаю, наступне буде працювати. Беручи його приклад і переробляючи його:

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