Jak pokolorować hotspoty asp w imagemap?

Question

Mam obraz (obraz jest planem piętra dla budynku), a obraz zawiera różne pokoje, które mogą być otwarte lub zarezerwowane. Użyłem Imagemap i hotspotów do mapowania współrzędnych pomieszczeń i obsługuję zdarzenia onclick, aby zrobić to, czego potrzebuję, aby je zrealizować. Problem polega na tym, jak mogę pokolorować współrzędne hotspotu po zarezerwowaniu pokoju? Śledzę zarezerwowane pokoje w mojej bazie danych, więc nie ma problemu ze świadomością, który pokój jest zarezerwowany, ale problemem jest brak właściwości koloru dla hotspotów. Jaki jest najlepszy sposób na rozwiązanie tego problemu? JavaScript?

Wiem, że mogę zamienić obrazy na kliknięcia i inne, ale są setki pokoi i stratą czasu byłoby mieć tyle zdjęć dla każdej możliwości zarezerwowanych/niezarezerwowanych pokoi.

Answer 1

HTML5 ma rysunek proceduralnego poprzez canvas

Answer 2

Nie mów jQuery, ale na pewno byłoby łatwiej, niż zaczynać od zera. Wtyczka jQuery to zrobić:

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

Twój dostęp do bazy danych jest kwestią nieco czerwonego śledzia. Nie ma powodu, aby serwer nie mógł przekazać danych potrzebnych jako część znaczników podczas ładowania strony, np.

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

.. lub jakikolwiek format/struktura/typy danych są dla Ciebie przydatne. Nie musisz używać bloku script - możesz umieścić go w ukrytym div, to naprawdę nie ma znaczenia. Nie musisz też używać JSON, to jest po prostu wygodne. Następnie możesz użyć tych danych jako danych wejściowych do czegoś podobnego do ImageMapster, aby podświetlić potrzebne obszary. Po prostu ukryj obraz, dopóki nie skończysz go konfigurować, a jeśli użytkownik końcowy kiedykolwiek zobaczy, to w jaki sposób został załadowany z serwera.

Przykład podjęcie pewnych danych ze znaczników i używając go ustawić hotspotów na imagemap użyciu ImageMapster:

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