Làm cách nào để tô màu các điểm nóng asp trên một sơ đồ tưởng tượng?

Question

Tôi có hình ảnh (hình ảnh là sơ đồ mặt bằng cho một tòa nhà) và hình ảnh chứa nhiều phòng khác nhau có thể mở hoặc được đặt trước. Tôi đã sử dụng một Imagemap và các điểm nóng để vạch ra tọa độ của các phòng và tôi đang xử lý các sự kiện onclick để làm những gì tôi cần chúng hoàn thành. Vấn đề là, làm thế nào tôi có thể tô màu các tọa độ của điểm phát sóng khi phòng đã được đặt trước? Tôi theo dõi các phòng dành riêng trong cơ sở dữ liệu của tôi, do đó, nó không phải là một vấn đề khi biết phòng được dành riêng, nhưng vấn đề là không có tài sản màu cho các điểm nóng. Cách tốt nhất để giải quyết vấn đề này là gì? Javascript?

Tôi biết tôi có thể trao đổi hình ảnh khi nhấp và không có gì, nhưng có hàng trăm phòng và sẽ lãng phí thời gian để có nhiều hình ảnh cho mọi khả năng đặt phòng/không đặt trước.

Answer 1

HTML5 có vẽ thủ tục qua canvas

Answer 2

Bạn không nói jQuery nhưng nó chắc chắn sẽ dễ dàng hơn so với bắt đầu từ đầu. jQuery plugin để làm điều này:

http://www.outsharked.com/imagemapster/

vấn đề truy cập cơ sở dữ liệu của bạn là một chút của một cá trích đỏ. Không có lý do gì máy chủ không thể chuyển dữ liệu cần thiết như một phần của đánh dấu khi trang được tải, ví dụ:

<script type="application/json" id="map-data"> 
    [1,2,10,33] 
</script> 

.. hoặc bất kỳ định dạng/cấu trúc/kiểu dữ liệu nào hữu ích cho bạn. Bạn không cần phải sử dụng một khối script - bạn có thể đặt nó trong một div ẩn, nó thực sự không quan trọng. Bạn cũng không phải sử dụng JSON, điều này chỉ thuận tiện. Sau đó, bạn có thể sử dụng dữ liệu đó làm đầu vào cho một cái gì đó như ImageMapster để làm nổi bật các khu vực cần thiết. Chỉ cần ẩn hình ảnh cho đến khi bạn hoàn thành việc cấu hình nó, và theo như người dùng cuối sẽ thấy, đó là cách nó được tải từ máy chủ.

Ví dụ lấy một số dữ liệu từ đánh dấu, và sử dụng nó để thiết lập các điểm nóng trên một Imagemap sử dụng ImageMapster:

http://jsfiddle.net/jamietre/hD6bM/