ละเว้นการโต้ตอบของเมาส์บนภาพซ้อนทับ

ฉันมีแถบเมนูที่มีเอฟเฟกต์วางเมาส์และตอนนี้ฉันต้องการวางภาพโปร่งใสที่มีวงกลมและข้อความ "handdrawn" บนรายการเมนูรายการใดรายการหนึ่ง หากฉันใช้การวางตำแหน่งแบบสัมบูรณ์เพื่อวางภาพซ้อนทับเหนือรายการเมนูผู้ใช้จะไม่สามารถคลิกปุ่มและเอฟเฟกต์การวางเมาส์จะไม่ทำงาน

มีวิธีใดบ้างที่จะปิดการใช้งานการโต้ตอบของเมาส์กับภาพซ้อนทับนี้เพื่อให้เมนูยังคงทำงานเหมือนเดิมแม้ว่าจะอยู่ใต้รูปภาพก็ตาม

แก้ไข:

เนื่องจากเมนูถูกสร้างขึ้นด้วย joomla ฉันจึงไม่สามารถปรับแต่งรายการเมนูใดรายการหนึ่งได้ และแม้ว่าฉันจะทำได้ แต่ฉันก็ไม่รู้สึกว่าโซลูชันจาวาสคริปต์นั้นเหมาะสม ในที่สุดฉันก็ "ทำเครื่องหมาย" รายการเมนูด้วยลูกศรที่อยู่นอกองค์ประกอบรายการเมนู ไม่ดีเท่าที่ฉันอยากให้เป็น แต่มันก็ใช้ได้ดีอยู่ดี

ทางออกที่ดีที่สุดที่ฉันพบคือ 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 "menuOption" วิธีนี้จะบันทึกการคลิกของผู้ใช้ทั่วทั้งกล่อง

คุณจะต้องให้ภาพของคุณเองเมื่อทำการทดสอบ :)

ข้อแม้: หากคุณคาดหวังว่าปุ่มเมนูของคุณจะตอบสนองต่อการโต้ตอบของผู้ใช้ (ตัวอย่างเช่นการเปลี่ยนสีเพื่อจำลองปุ่ม) คุณจะต้องมีโค้ดพิเศษที่แนบมากับจาวาสคริปต์ที่คุณจะเรียกใช้บนแท็กโค้ดพิเศษนี้สามารถระบุ ' menuOption 'ผ่าน DOM และเปลี่ยนสี

นอกจากนี้ยังไม่มีวิธีอื่นใดที่ฉันรู้ว่าคุณสามารถใช้เหตุการณ์คลิกและให้ลงทะเบียนกับองค์ประกอบที่อยู่ใต้องค์ประกอบของหน้าที่มองเห็นได้ ฉันได้ลองสิ่งนี้เช่นกันในฤดูร้อนนี้และไม่พบวิธีแก้ปัญหาอื่นนอกจากนี้

หวังว่านี่จะช่วยได้

ปล: การเขียนเกี่ยวกับเหตุการณ์ที่quirksmodeช่วยให้ฉันเข้าใจว่าเหตุการณ์ต่างๆทำงานอย่างไรในเบราว์เซอร์

ให้ปุ่มมีคุณสมบัติ z-index สูงกว่าภาพวาดด้วยมือ:

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

อย่างไรก็ตามอย่าลืมทดสอบในเบราว์เซอร์หลัก ๆ ทั้งหมด IE ตีความ z-index แตกต่างจาก FF หากต้องการให้ใครทราบรายละเอียดเพิ่มเติมคุณจะต้องโพสต์ข้อมูลเพิ่มเติมลิงก์จะดีที่สุด

จากสิ่งที่ Pekka Gaiser กล่าวฉันคิดว่าสิ่งต่อไปนี้จะได้ผล นำตัวอย่างของเขามาใช้ใหม่:

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

ที่นี่คุณจะสามารถวางเหตุการณ์บนแท็กที่อยู่ข้างใต้ได้และหากรูปภาพของคุณมีเหตุการณ์ไม่ได้เริ่มต้นการจับภาพ (! เบราว์เซอร์ IE) จากนั้นจึงฆ่าการแพร่กระจายของเหตุการณ์

หากคุณต้องการความช่วยเหลือเพิ่มเติมโปรดแจ้งให้เราทราบอีกเล็กน้อยเกี่ยวกับสถานการณ์

หากรูปภาพอยู่ในตำแหน่งคงที่คุณสามารถจับภาพเหตุการณ์การคลิกจากรูปภาพในขณะที่ฟองขึ้นโดยวางแท็ก img ไว้ในองค์ประกอบรายการเมนู

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