Ignorar la interacción del mouse en la imagen superpuesta

Tengo una barra de menú con efectos de desplazamiento y ahora quiero colocar una imagen transparente con un círculo y un texto "dibujado a mano" sobre uno de los elementos del menú. Si utilizo el posicionamiento absoluto para colocar la imagen de superposición sobre el elemento del menú, el usuario no podrá hacer clic en el botón y el efecto de desplazamiento no funcionará.

¿Hay alguna forma de deshabilitar de alguna manera la interacción del mouse con esta imagen de superposición para que el menú siga funcionando como antes incluso aunque esté debajo de una imagen?

Editar:

Debido a que el menú se generó con joomla, no pude modificar solo uno de los elementos del menú. E incluso si pudiera, no sentí que una solución de javascript fuera apropiada. Así que al final "marqué" el elemento del menú con una flecha fuera del elemento del elemento del menú. No tan agradable como hubiera querido, pero funcionó bien de todos modos.

La mejor solución que he encontrado es con CSS Styling:

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

pointer-events El atributo funciona bastante bien y es simple.

Así que hice esto y funciona en Firefox 3.5 en Windows XP. Muestra un cuadro con algo de texto, una imagen superpuesta y un div transparente arriba que intercepta todos los clics.

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

Lo que hice: Creé un div y lo dimensioné para que sea el tamaño de una opción de menú, 100x40px (un valor arbitrario, pero ayuda a ilustrar la muestra).

El div tiene una superposición de imágenes y una superposición de enlaces. El enlace contiene un div de tamaño igual al div 'menuOption'. De esta forma, el clic de un usuario se captura en todo el cuadro.

Deberá proporcionar su propia imagen al realizar la prueba. :)

Advertencia: si espera que su botón de menú responda a la interacción del usuario (por ejemplo, cambiar el color para simular un botón), necesitará un código adicional adjunto al javascript que invocará en la etiqueta, este código adicional podría abordar el ' menuOption 'a través del DOM y cambia su color.

Además, no conozco otra forma de que pueda tomar un evento de clic y hacer que se registre en un elemento debajo de un elemento de página visible. También probé esto este verano y no encontré otra solución que esta.

Espero que esto ayude.

PD: El artículo sobre eventos en quirksmode fue muy útil para ayudarme a comprender cómo se comportan los eventos en los navegadores.

Dale al botón una propiedad de índice Z más alta que la imagen dibujada a mano:

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

sin embargo, asegúrese de probarlo en todos los navegadores principales. IE interpreta el índice z de manera diferente a FF. Para que alguien presente más detalles, tendrías que publicar más información, un enlace sería lo mejor.

Sobre la base de lo que dijo Pekka Gaiser, creo que lo siguiente funcionará. Tomando su ejemplo y reelaborándolo:

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

Aquí debería poder colocar un evento en la etiqueta a subyacente y, a menos que su imagen tenga un evento, inicia una captura (navegadores! IE) y luego mata la propagación del evento.

Si necesita un poco más de ayuda, háganos saber un poco más sobre la situación.

Si la imagen se colocará estáticamente, puede capturar el evento de clic de la imagen a medida que aparece, colocando la etiqueta img dentro del elemento del elemento del menú.

<div onclick="menuclick()">
  <img src="overlay.png" style="position:absolute;" />
</div>