Abaikan interaksi mouse pada gambar overlay

Saya memiliki bilah menu dengan efek hover, dan sekarang saya ingin menempatkan gambar transparan dengan lingkaran dan teks "digambar tangan" di atas salah satu item menu. Jika saya menggunakan pemosisian absolut untuk menempatkan gambar overlay di atas item menu, pengguna tidak akan dapat mengklik tombol dan efek hover tidak akan berfungsi.

Adakah cara untuk menonaktifkan interaksi tetikus dengan gambar hamparan ini agar menu tetap berfungsi seperti sebelumnya meskipun di bawah gambar?

Edit:

Karena menu dibuat dengan joomla, saya tidak dapat mengubah hanya satu item menu. Dan bahkan jika saya bisa, saya merasa solusi javascript tidak sesuai. Jadi pada akhirnya saya "menandai" item menu dengan panah di luar elemen menu-item. Tidak sebaik yang saya inginkan, tapi tetap berhasil.

Solusi terbaik yang saya temukan adalah dengan CSS Styling:

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

pointer-events atribut berfungsi cukup baik dan sederhana.

Jadi saya melakukan ini dan berfungsi di Firefox 3.5 pada Windows XP. Ini menunjukkan kotak dengan beberapa teks, hamparan gambar, dan div transparan di atasnya yang memotong semua klik.

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

Apa yang telah saya lakukan: Saya telah membuat div dan mengukurnya menjadi ukuran opsi menu, 100x40px (nilai sewenang-wenang, tetapi membantu dengan mengilustrasikan sampel).

Div memiliki hamparan gambar, dan hamparan tautan. Tautan berisi div berukuran sama dengan div 'menuOption'. Dengan cara ini klik pengguna ditangkap di seluruh kotak.

Anda perlu memberikan gambar Anda sendiri saat menguji. :)

Peringatan: Jika Anda berharap tombol menu Anda merespons interaksi pengguna (misalnya, mengubah warna untuk mensimulasikan tombol), maka Anda memerlukan kode tambahan yang dilampirkan ke javascript yang akan Anda panggil pada tag, kode tambahan ini dapat mengatasi ' menuOption 'melalui DOM dan ubah warnanya.

Selain itu, tidak ada cara lain yang saya tahu bahwa Anda dapat mengambil peristiwa klik, dan mendaftarkannya pada elemen di bawah elemen halaman yang terlihat. Saya sudah mencoba ini juga musim panas ini, dan tidak menemukan solusi lain selain ini.

Semoga ini membantu.

NB: Penulisan acara di quirksmode sangat membantu saya memahami bagaimana peristiwa berperilaku di browser.

Berikan tombol properti indeks-z yang lebih tinggi daripada gambar yang digambar dengan tangan:

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

namun, pastikan Anda mengujinya di semua browser utama. IE menafsirkan indeks-z secara berbeda dari FF. Untuk seseorang yang ingin memberikan lebih banyak detail, Anda harus memposting lebih banyak info, tautan akan menjadi yang terbaik.

Berdasarkan apa yang dikatakan Pekka Gaiser, saya pikir yang berikut ini akan berhasil. Mengambil teladannya dan mengerjakannya ulang:

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

Di sini Anda harus dapat menempatkan peristiwa pada tag-yang mendasarinya dan, kecuali gambar Anda memiliki peristiwa, memulai penangkapan (! Browser IE) dan kemudian menghentikan penyebaran peristiwa.

Jika Anda memerlukan bantuan lebih lanjut, beri tahu kami lebih banyak tentang situasinya.

Jika gambar akan diposisikan secara statis, Anda dapat menangkap peristiwa klik dari gambar saat menggelembung, dengan menempatkan tag img di dalam elemen item menu.

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