Abaikan interaksi mouse pada gambar overlay

94

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.

javascript html css xhtml javascript-events Daniel
sumber

Jawaban:

239

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.

DZenBot
sumber
Yup - Ini barang bagus. Ini juga berfungsi dalam menekan pengujian hit untuk elemen tanpa set latar belakang yang digunakan sebagai wadah untuk item lain (yang sebenarnya Anda ingin uji-hit.)
Armentage
4
Perlu diingat bahwa peristiwa penunjuk belum didukung oleh semua browser utama. IE tidak mendukungnya (kejutan ...), dan menurut saya Safari juga tidak mendukungnya.
Hatchmaster
3
Safari baik-baik saja, menurut caniuse.com/#search=pointer-events ini , hanya Opera dan iE yang keluar
Logic Wreck
ingin mengabaikan kursor juga
William Entriken
1
Bekerja dengan baik dengan d3 dan svg juga. Memecahkan masalah bagi saya di mana kotak fokus tumbuh menjadi besar ke titik di mana ia berada di bawah mouse.
Michael Hobbs
2

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.

Mike Mytkowski
sumber
1

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.

Pekka
sumber
1
Bukankah itu akan menyembunyikan gambar yang digambar dengan tangan?
Roatin Marth
Tidak jika tautannya transparan.
Pekka
0

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.

jeremyosborne
sumber
0

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