छविमैप पर एएसपी हॉटस्पॉट कैसे रंग करें?

Question

मेरे पास एक छवि है (छवि एक इमारत के लिए एक मंजिल योजना है), और छवि में विभिन्न कमरे हैं जो या तो खुले या आरक्षित हो सकते हैं। मैंने कमरे के निर्देशांक को मैप करने के लिए एक छविमैप और हॉटस्पॉट का उपयोग किया है और मैं उन घटनाओं को करने के लिए ऑनक्लिक घटनाओं को संभालने में कामयाब रहा हूं जो मुझे पूरा करने के लिए आवश्यक हैं। समस्या यह है कि कमरे आरक्षित होने के बाद मैं हॉटस्पॉट के निर्देशांक कैसे रंग सकता हूं? मैं अपने डेटाबेस में आरक्षित कमरे का ट्रैक रखता हूं, इसलिए यह पता नहीं है कि कौन सा कमरा आरक्षित है, लेकिन समस्या यह है कि हॉटस्पॉट के लिए कोई रंगीन संपत्ति नहीं है। इस बारे में जाने का सबसे अच्छा तरीका क्या है? जावास्क्रिप्ट?

मुझे पता है कि मैं क्लिक और व्हाट्नॉट पर छवियों को स्वैप कर सकता हूं, लेकिन सैकड़ों कमरे हैं, और यह आरक्षित/आरक्षित कमरों की हर संभावना के लिए कई छवियों के लिए समय बर्बाद होगा।

Answer 1

एचटीएमएल 5 प्रक्रियात्मक ड्राइंग करते canvas

Answer 2

के माध्यम से आप jQuery का कहना है कि नहीं, लेकिन यह यकीन है कि शून्य से शुरू की तुलना में आसान होगा है। jQuery प्लगइन यह करने के लिए:

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

आपका डेटाबेस का उपयोग इस मुद्दे को एक रेड हेरिंग का एक सा है। पृष्ठ लोड होने पर मार्कअप के हिस्से के रूप में आवश्यक डेटा को पास नहीं कर सकता है, उदाहरण के लिए कोई कारण नहीं है।

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

.. या जो भी प्रारूप/संरचना/डेटा प्रकार आपके लिए उपयोगी हैं। आपको script ब्लॉक का उपयोग करने की आवश्यकता नहीं है - आप इसे एक छिपा div में डाल सकते हैं, इससे कोई फर्क नहीं पड़ता। न ही आपको JSON का उपयोग करना होगा, यह केवल सुविधाजनक है। फिर आप आवश्यक डेटा को हाइलाइट करने के लिए उस डेटा का उपयोग छविमैस्टर जैसे कुछ इनपुट के रूप में कर सकते हैं। जब तक आप इसे कॉन्फ़िगर नहीं कर लेते तब तक छवि को बस छुपाएं, और जहां तक ​​अंतिम उपयोगकर्ता कभी भी देखेगा, इस तरह यह सर्वर से लोड किया गया था। मार्कअप से कुछ डेटा ले, और इसका उपयोग ImageMapster का उपयोग कर एक ImageMap पर हॉटस्पॉट सेट करने के लिए की

उदाहरण:

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