Làm thế nào để tạo bản đồ khu vực hình ảnh vị trí tuyệt đối có thể nhấp được bằng chuột?

Question

Tôi có một số hình ảnh được đặt ở vị trí trên cùng bằng cách sử dụng vị trí tuyệt đối. Những hình ảnh này là một phần trong suốt và có html area và map để chỉ hiển thị các phần hiển thị có thể nhấp. Trong jQuery, tôi đã đính kèm các sự kiện chuột vào các thẻ area.

Tính năng này hoạt động tốt đối với một hình ảnh: mouseenter và mouseleave fire chỉ khi phần được ánh xạ của hình ảnh được nhập vào.

Vấn đề là nó chỉ hoạt động cho hình ảnh trên cùng. Đối với tất cả những người khác, nó không cháy các sự kiện không CSS di chuột làm việc, bởi vì có một hình ảnh trên đầu trang của nó. Điều này mặc dù thực tế rằng area s không trùng lặp và map s ở phía trước hình ảnh.

Dưới đây là một minh chứng của vấn đề: http://markv.nl/stack/imgmap2/

Answer 1

Bạn có thể đặt một duy nhất, hình ảnh hoàn toàn minh bạch trên đầu trang của tất cả các hình ảnh cá nhân, và đính kèm tất cả các lĩnh vực Imagemap hình ảnh đó. Nó sẽ hoạt động như một yếu tố bắt giữ cho các sự kiện chuột và bạn vẫn có thể thay đổi tất cả các hình ảnh riêng lẻ.

Answer 2

Đó không phải là câu trả lời/giải pháp trực tiếp ...

Tại sao bạn không sử dụng canvas/SVG để vẽ? Có rất nhiều thư viện giúp nhiệm vụ trở nên dễ dàng. Một trong số đó là RaphaëlJS (kiểm tra số example) này. Ưu điểm của thư viện này là nó cho phép tương tác chuột.

Một thư viện khác mà bạn có thể xem là EaselJS, nhưng nó không hoạt động trong các trình duyệt không hỗ trợ <canvas>, vì vậy không hỗ trợ IE < 9.

Answer 3

Chỉ hoạt động nếu hình ảnh không trùng lặp (xem hình). Trong trường hợp của bạn, tất cả các hình ảnh có cùng kích thước và xếp chồng lên nhau. Vì trình duyệt xử lý hình ảnh dưới dạng đối tượng rắn (chúng không bận tâm về độ trong suốt), không có cách nào để xác định hình ảnh bạn muốn di chuột vào lúc này?

+-----------+-----------+ 
    |   |   | 
    | img1 | img2 | 
    |   |   | 
    |   |   | 
    +-----------+-----------+ 
    |   |   | 
    | img3 | img4 | 
    |   |   | 
    |   |   | 
    +-----------+-----------+ 

Tuy nhiên, bạn có thể làm việc xung quanh này:

Chỉ cần sử dụng một Imagemap duy nhất trên một trong những hình ảnh mà chứa mọi lĩnh vực, và với một javascript chút bạn có thể kích hoạt các di chuột tác dụng trên tất cả các khác hình ảnh.

$("area").hover(function(){ 
    var $target = $("#"+$(this).data("target")); // getting the target image 
    $target.attr("src",$target.attr("src").replace("slice","slice-focus")); //replacing the src with the src of the hover image 
},function(){ 
    var $target = $("#"+$(this).data("target")); 
    $target.attr("src",$target.attr("src").replace("focus-","")); //revert the changes 
});​ 

dụ làm việc dựa trên mã của bạn: jsFiddle-Demo

Answer 4

Bạn cũng có thể cung điện trong suốt div với chiều cao cố định và chiều rộng mà sẽ có onclick() sự kiện với chức năng binded. somehing like:

<div style="position: absolute; top: 10px; left: 10px; width: 100px; height: 100px;" onclick="dosomething();"></div>