जावास्क्रिप्ट में छवियों को ओवरले कैसे करें?

Question

मुझे निम्न समस्या को हल करने की आवश्यकता है।

मेरे पास समान आयामों की दो (या अधिक) .PNG छवियां हैं। प्रत्येक पीएनजी छवि पारदर्शी पृष्ठभूमि रंग के साथ बनाई गई है।

मुझे आईएमजी 1 और आईएमजी 2 पर प्रदर्शित करने की आवश्यकता है, इसलिए उन जगहों पर जहां img2 में ट्रांस्पेरेंट रंग है, img1 देखा जाएगा।

उदाहरण के लिए: आईएमजी 1 पारदर्शी रंग से भरा ऊपरी भाग और नीचे की ओर एक गाय। img2 ऊपरी हिस्से में बादलों और नीचे की ओर पारदर्शी रंग से भरा होता है।

मैं इन दो छवियों को जोड़ना और गाय के ऊपर बादल देखना चाहता हूं।

मैं समझता हूं कि मुझे छवियों को प्रदर्शित करते समय कुछ फ़िल्टर का उपयोग करने की आवश्यकता है, लेकिन यह सुनिश्चित नहीं है कि इसका कौन सा और किस पैरामीटर का उपयोग किया जाए।

Answer 1

आपको किसी भी प्रकार के फ़िल्टर (except in IE6) का उपयोग करने की आवश्यकता नहीं है।

आप दोनों तत्वों को एक ही क्षेत्र पर कब्जा करने के लिए सीएसएस position: absolute का उपयोग करके प्रत्येक-दूसरे के शीर्ष पर <img> तत्वों को स्थानांतरित कर सकते हैं।

In IE6, you'll need an AlphaImageLoader filter simply to display the PNGs with transparency

Answer 2

आप अपने .style.position को "पूर्ण" सेट करने का प्रयास कर सकते हैं, उन्हें छोड़ दिया और शीर्ष (या सही है या नीचे) के साथ एक ही निर्देशांक देते हैं, और फिर अपनी z- सूचकांक बदल जाते हैं। हालांकि यह काफी गंदा है, और शायद यह आपके पृष्ठ के साथ अच्छा काम नहीं करता है, लेकिन मैं एक और समाधान के बारे में सोच नहीं सकता।

Answer 3

कुछ इस तरह (बस HTML/CSS का प्रयोग करके) काम करना चाहिए:

HTML:

<div class="imageWrapper"> 
    <img class="overlayImage" src="cow.png"> 
    <img class="overlayImage" src="clouds.png"> 
    <img class="overlayImage" src="downpart.png"> 
</div> 

सीएसएस:

.imageWrapper { 
    position: relative; 
} 
.overlayImage { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

ध्यान रखें कि IE6 नहीं है पीएनजी में पारदर्शिता को बहुत अच्छी तरह से संभालें। यदि आपको आईई 6 में काम करने की ज़रूरत है, तो आपको अपने द्वारा निर्दिष्ट फ़िल्टरों को लागू करने की आवश्यकता होगी। यह प्रक्रिया detailed here है।

Answer 4

किसी भी ब्राउज़र

<script> 
$(function() { 
    var position = $("#i1").offset(); 
    $('#i2').css({ position:'absolute', top:position.top, left: position.left}); 
}); 
</script> 
<img id='i1' src='images/zap_ring.png' /> 
<img id='i2' src='images/zap_ring_hover.png' /> 

में यह कोशिश करते हैं और समायोजित top & left मूल्यों

$('#i2').css({ position:'absolute', top:position.top-10, left: position.left+5});