Bỏ qua tương tác của chuột trên hình ảnh lớp phủ

Tôi có một thanh menu với hiệu ứng di chuột và bây giờ tôi muốn đặt một hình ảnh trong suốt có hình tròn và văn bản "vẽ tay" trên một trong các mục menu. Nếu tôi sử dụng định vị tuyệt đối để đặt hình ảnh lớp phủ phía trên mục menu, người dùng sẽ không thể nhấp vào nút và hiệu ứng di chuột sẽ không hoạt động.

Có cách nào để vô hiệu hóa tương tác của chuột với hình ảnh lớp phủ này bằng cách nào đó để menu tiếp tục hoạt động như trước đây mặc dù nó nằm bên dưới hình ảnh không?

Biên tập:

Vì menu được tạo bằng joomla nên tôi không thể chỉnh sửa chỉ một trong các mục menu. Và ngay cả khi tôi có thể, tôi không cảm thấy giải pháp javascript nào là phù hợp. Vì vậy, cuối cùng tôi đã "đánh dấu" mục menu bằng một mũi tên bên ngoài phần tử menu-item. Không tốt đẹp như tôi mong muốn, nhưng dù sao thì nó cũng thành công.

Giải pháp tốt nhất tôi đã tìm thấy là với CSS Styling:

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

pointer-events thuộc tính hoạt động khá tốt và đơn giản.

Vì vậy, tôi đã làm điều này và nó hoạt động trong Firefox 3.5 trên Windows XP. Nó hiển thị một hộp có một số văn bản, lớp phủ hình ảnh và một div trong suốt ở trên chặn tất cả các nhấp chuột.

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

Những gì tôi đã làm: Tôi đã tạo một div và định kích thước nó thành kích thước tùy chọn menu có thể có, 100x40px (một giá trị tùy ý, nhưng nó giúp minh họa cho mẫu).

Div có lớp phủ hình ảnh và lớp phủ liên kết. Liên kết chứa một div có kích thước giống như div 'menuOption'. Bằng cách này, một lần nhấp của người dùng được ghi lại trên toàn bộ hộp.

Bạn sẽ cần cung cấp hình ảnh của chính mình khi thử nghiệm. :)

Lưu ý: Nếu bạn mong đợi nút menu của mình phản hồi lại tương tác của người dùng (ví dụ: thay đổi màu để mô phỏng một nút), thì bạn sẽ cần thêm mã được đính kèm với javascript mà bạn sẽ gọi trên thẻ, mã bổ sung này có thể giải quyết vấn đề ' menuOption 'thông qua DOM và thay đổi màu của nó.

Ngoài ra, không có cách nào khác mà tôi biết về việc bạn có thể thực hiện một sự kiện nhấp chuột và đăng ký sự kiện đó trên một phần tử bên dưới phần tử trang hiển thị. Tôi cũng đã thử điều này vào mùa hè này và không tìm thấy giải pháp nào khác ngoài giải pháp này.

Hi vọng điêu nay co ich.

Tái bút: Việc ghi lại các sự kiện tại quirksmode đã đi một chặng đường dài để giúp tôi hiểu cách các sự kiện hoạt động trong trình duyệt.

Cung cấp cho nút một thuộc tính z-index cao hơn hình ảnh vẽ tay:

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

tuy nhiên, hãy đảm bảo rằng bạn kiểm tra nó trên tất cả các trình duyệt chính. IE diễn giải z-index khác với FF. Để ai đó biết thêm chi tiết, bạn sẽ phải đăng thêm thông tin, một liên kết sẽ là tốt nhất.

Dựa trên những gì Pekka Gaiser đã nói, tôi nghĩ những điều sau đây sẽ hiệu quả. Lấy ví dụ của anh ấy và làm lại nó:

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

Tại đây, bạn sẽ có thể đặt một sự kiện trên thẻ a bên dưới và, trừ khi hình ảnh của bạn có sự kiện, hãy bắt đầu chụp (! Trình duyệt IE) và sau đó loại bỏ sự lan truyền của sự kiện.

Nếu bạn cần thêm một chút trợ giúp, hãy cho chúng tôi biết thêm một chút về tình hình.

Nếu hình ảnh được định vị tĩnh, bạn có thể ghi lại sự kiện nhấp chuột từ hình ảnh khi nó bong bóng lên, bằng cách đặt thẻ img bên trong phần tử mục menu.

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