हमारे पास एक प्रश्नोत्तरी है जिसे हमने फ़्लैश साल पहले विकसित किया था, यह निर्धारित करने के लिए हिट क्षेत्रों का उपयोग किया गया था कि किसी ने छवि के उचित भाग पर क्लिक किया है (लगता है कि 'एनाटॉमी क्विज़')। ये हिट क्षेत्र रूपरेखा के लिए बहुत कठिन थे और रूपरेखा समन्वय डेटा का पुन: उपयोग करने का कोई तरीका नहीं है ...मुझे कैसे पता चलेगा कि क्या मैं किसी वेब पेज पर एक पीएनजी के पारदर्शी या गैर-पारदर्शी भाग पर क्लिक कर रहा हूं?
अब, हम HTML में चीज़ को फिर से करने की कोशिश कर रहे हैं - तो, हमारे पास पृष्ठभूमि छवि है एक मादा और एक पीएनजी जो ज़ेड-ऑर्डर में उच्च बैठता है जिसमें इसका एक हिस्सा पूरी तरह से पारदर्शी होता है, जबकि अन्य भागों में 50% ग्रे होता है। यह छात्र को पढ़ाने के लिए प्रयोग किया जाता है जहां पृष्ठभूमि की छवि पर कुछ है।
मैं उस पीएनजी मास्क परत से डेटा का उपयोग करने के लिए 'क्विज़िंग मोड' में डेटा का उपयोग करने में सक्षम होना चाहूंगा यह निर्धारित करने के लिए कि क्या छात्र सही ढंग से मादा के एक विशिष्ट हिस्से पर क्लिक करता है ... मैं मास्किंग सेट करने के बारे में सोच रहा था 100% पारदर्शिता के लिए पीएनजी (इसलिए छात्र इसे नहीं देखता), लेकिन यदि ब्राउजर जानता था कि वे छवि के सही क्षेत्र (जो मास्क पर 100% पारदर्शी है) पर क्लिक कर रहे थे, तो उन्होंने सही तरीके से क्लिक किया।
एचटीएमएल, सीएसएस, और/या jQuery के साथ इसे पूरा करने के तरीके पर कोई विचार?
बिल्कुल सही - और यह भी एक रचनात्मक छवि का उपयोग करता है। –
गैर-स्क्वायर छवि के आगे परीक्षण पर, मुझे समायोजन करना पड़ा - पिक्सेलपॉस गणना को 4 * (mousePos.x + width * mousePos) में समायोजित करने की आवश्यकता होती है।वाई) (यह ऊंचाई थी) और अब http://jsfiddle.net/JKzQN/ –
हूप्स पर उपलब्ध है :) –