Bindirme görüntüsünde fare etkileşimini yoksay

Üzerine gelme efektlerine sahip bir menü çubuğum var ve şimdi menü öğelerinden birinin üzerine daire ve "elle çizilmiş" metin içeren şeffaf bir resim yerleştirmek istiyorum. Bindirme görüntüsünü menü öğesinin üzerine yerleştirmek için mutlak konumlandırma kullanırsam, kullanıcı düğmeyi tıklayamaz ve fareyle üzerine gelme efekti çalışmaz.

Bu kaplama görüntüsüyle fare etkileşimini bir şekilde devre dışı bırakmanın bir yolu var mı, böylece menü bir görüntünün altında olsa bile eskisi gibi çalışmaya devam edecek?

Düzenle:

Menü joomla ile oluşturulduğundan, menü öğelerinden sadece birini değiştiremedim. Ve yapabilseydim bile, bir javascript çözümünün uygun olduğunu düşünmedim. Sonunda menü öğesini menü öğesi öğesinin dışında bir okla "işaretledim". Olmasını istediğim kadar güzel değildi, ama yine de işe yaradı.

Bulduğum en iyi çözüm CSS Styling ile:

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

pointer-events öznitelik oldukça iyi çalışır ve basittir.

Bunu yaptım ve Windows XP'de Firefox 3.5'te çalışıyor. Üzerinde bazı metinler, bir görüntü bindirme ve tüm tıklamaları kesen şeffaf bir div içeren bir kutu gösterir.

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

Yaptığım şey: Bir div oluşturdum ve onu bir menü seçeneğinin boyutlandırılabileceği şekilde boyutlandırdım, 100x40px (rastgele bir değer, ancak örneği göstermeye yardımcı oluyor).

Div, bir görüntü kaplamasına ve bir bağlantı kaplamasına sahiptir. Bağlantı, 'menuOption' div ile aynı boyutta bir div içerir. Bu şekilde bir kullanıcı tıklaması tüm kutu boyunca yakalanır.

Test ederken kendi resminizi sağlamanız gerekecektir. :)

Uyarı: Menü düğmenizin kullanıcı etkileşimine yanıt vermesini bekliyorsanız (örneğin, bir düğmeyi simüle etmek için rengi değiştirmek), etiket üzerinde çalıştıracağınız javascript'e eklenmiş ekstra koda ihtiyacınız olacaktır, bu ekstra kod ' menuOption 'elementini DOM aracılığıyla ve rengini değiştirin.

Ayrıca, bir tıklama olayını alıp görünür bir sayfa öğesinin altındaki bir öğeye kaydettirebileceğinizi bilmediğim başka bir yol yok. Bunu bu yaz da denedim ve bundan başka bir çözüm bulamadım.

Bu yardımcı olur umarım.

Not: Tuhaf moddaki olaylar üzerine yazma, tarayıcılarda olayların nasıl davrandığını anlamama yardımcı olmak için uzun bir yol kat etti.

Düğmeye, elle çizilmiş resimden daha yüksek bir z-endeksi özelliği verin:

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

ancak, tüm büyük tarayıcılarda test ettiğinizden emin olun. IE, z-endeksini FF'den farklı şekilde yorumlar. Birinin daha fazla ayrıntı bulması için daha fazla bilgi göndermeniz gerekir, bir bağlantı en iyisidir.

Pekka Gaiser'in söylediklerine dayanarak, aşağıdakilerin işe yarayacağını düşünüyorum. Onun örneğini alıp elden geçirerek:

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

Burada, temeldeki a-etiketine bir olay yerleştirebilmelisiniz ve görüntünüzün bir olayı yoksa, bir yakalama (! IE tarayıcıları) başlatır ve ardından olayın yayılmasını durdurur.

Biraz daha yardıma ihtiyacınız varsa, durum hakkında bize biraz daha bilgi verin.

Görüntü statik olarak konumlandırılacaksa, img etiketini menü öğesi öğesinin içine yerleştirerek görüntüden tıklama olayını görüntüden yakalayabilirsiniz.

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