जावास्क्रिप्ट

Question

में छवि का रंग बदलें मैं गतिशील रूप से एक नक्शा छवि का रंग बदलना चाहता हूं (नीले से लाल से कहें)। और मैं कैनवास का उपयोग नहीं कर सकता क्योंकि मुझे IE का समर्थन करना है। किसी भी विचार से मैं जावास्क्रिप्ट का उपयोग कर क्लाइंट साइड पर एक छवि का उपयोग कैसे कर सकता हूं?

Answer 1

इसे सर्वर की ओर करें और इसे एक नए संसाधन के रूप में लाएं, उदाहरण के लिए एक पारदर्शी स्पेसर छवि का उपयोग करें और वास्तविक छवि URL को क्लास नामों का उपयोग करके सेट सीएसएस चयनकर्ताओं में पृष्ठभूमि-छवि विशेषताओं के रूप में रखें।

अब छवि के वर्ग को बदलने से छवि को प्रतिस्थापित किया जाना चाहिए, कोई भी चालाक सामान क्लाइंटसाइड की आवश्यकता नहीं है।

Answer 2

आपको जो करना है उसके आधार पर, आप पृष्ठभूमि छवि के व्यूपोर्ट को स्थानांतरित करने के लिए शुद्ध सीएसएस का उपयोग कर सकते हैं। इस साइट के शीर्ष नौसेना मेनू देखें: http://grotonhomesforsale.com

देखें कि जब आप इसे माउस करते हैं, तो टेक्स्ट के नीचे छवि बदल जाती है? आप एक ही चीज कर सकते हैं लेकिन एक अलग छवि के साथ

Answer 3

यदि रंग संक्रमण बहुत ध्रुवीकृत होते हैं (यानी, बहुत सूक्ष्म ढाल परिवर्तन नहीं होते हैं), तो आप छवि के रंगीन भाग के लिए एक पारदर्शी "छेद" बना सकते हैं (8 बिट PNG या GIF प्रारूप का उपयोग IE6 समर्थन करने के लिए), और असली रंग करने के लिए पृष्ठभूमि रंग सेट करें:

<!-- mymap.png contains a transparent "hole" for color --> 
<img id="colorme" src="mymap.png" style="background-color:red" /> 

<script> 
// change the color to blue: 
document.getElementById('colorme').style.backgroundColor = 'blue' 
</script> 

यह आपके खोज "क्लाइंट पक्ष पर एक छवि में हेरफेर करने के लिए" समाधान नहीं करता है। मनमाने ढंग से छवियों में छेड़छाड़ करना कैनवास जैसी चीजों के साथ ही संभव है, और आईई-केवल वीएमएल के कुछ हिस्सों के साथ ही संभव है। लेकिन अगर यह एक साधारण रंग परिवर्तन है, तो यह चाल पर्याप्त हो सकती है।

Answer 4

वर्तमान में आईई 9 से शुरू होने वाले कैनवास का समर्थन करता है, इसलिए कैनवास में कनवर्ट करना और आईई में छवि में हेरफेर करना संभव है।

आप इस jquery प्लगइन पर विचार कर सकते हैं। यह प्रयोग करने में आसान है।

$("#myImageID").tancolor(); 

एक इंटरैक्टिव demo नहीं है। आप इसके साथ खेल सकते हैं।

उपयोग पर प्रलेखन देखें, यह बहुत आसान है। docs