क्या आप वेबपृष्ठ पर एक-दूसरे के ऊपर चित्रों को ले सकते हैं?

Question

मैं एक ऐसी वेबसाइट बनाना चाहता हूं जो "ड्रेस अप" गेम है जहां आप विभिन्न एक्सेसरीज़ पर क्लिक कर सकते हैं और वे एक दूसरे के शीर्ष पर परत लेंगे।

क्योंकि यह वर्णन करने के लिए थोड़ा मुश्किल है, मैं इन उदाहरणों पाया उम्मीद है कि प्रकाश डाला जाना चाहिए जो कि मैं क्या करने की कोशिश कर रहा हूँ:

• This is the closest website that I have found, लेकिन मैं कोड है कि बाहर कैसे लगाना है खोजने के लिए नहीं कर पा रहे छवियों को एक दूसरे के शीर्ष पर रखना चाहिए।
• Similar to this iOS princess game

मैं अभी छवियों के रूप में अलग अलग सामान के सैकड़ों है, और (ऊपर खेल के समान) मैं एक से अधिक का चयन करने में सक्षम होने का समर्थन की जरूरत है। तो मुझे एक समाधान की आवश्यकता है जिसके लिए मुझे राजकुमारी के शीर्ष पर सहायक संयोजनों के प्रत्येक पारगम्यता की एक छवि को पूर्व-सहेजने की आवश्यकता नहीं है (जैसा कि लाखों पूर्वनिर्धारित छवियां होंगी)।

आदर्श रूप से मुझे जावास्क्रिप्ट/jQuery या सीएसएस समाधान चाहिए लेकिन लोगों के पास कोई सुझाव होगा। फ्लैश सुझाव भी उपयोगी होंगे।

तो मेरी प्रश्न हैं:

• कैसे एक दूसरे के ऊपर पर छवियों के सभी अस्तर ऊपर के उदाहरण वेबसाइट है? मुझे ऐसा कोई सीएसएस या जावास्क्रिप्ट कोड नहीं दिख रहा है जो यह कर रहा है?
• क्या इस प्रकार की वेबसाइट बनाने के लिए कोई सुझाव हैं (लिंक, ट्यूटोरियल या कोड उदाहरण महान होंगे)?

Answer 1

संक्षिप्त उत्तर हाँ है।

इसे संभालने के कई तरीके हैं। एचटीएमएल/सीएसएस के साथ आप तत्वों को आसानी से एक-दूसरे के ऊपर फेंक सकते हैं।

HTML:

<img id="imga" src="img1.png"/> 
<img id="imgb" src="img2.png"/> 
<img id="imgc" src="img3.png"/> 

सीएसएस:

img 
{ 
    position:absolute; 
    top: 0px; 
    left: 0px; 
} 

तो चलो यहाँ क्या महत्वपूर्ण है पर एक नज़र डालते हैं। आपके एचटीएमएल दस्तावेज़ में 3 छवियां हैं (इमागा, आईएमजीबी, और आईएमजीसी)। इन्हें ओवरले करने के लिए, आपको पहले अपनी स्थितिपूर्ण सेट करना होगा ताकि छवियां किसी डिफ़ॉल्ट लेआउट व्यवहार को अनदेखा कर सकें। फिर, आप और शीर्ष संपत्ति का क्रमशः आईएमजी तत्वों के x, y निर्देशांक को परिभाषित करने के लिए उपयोग कर सकते हैं। उपर्युक्त उदाहरण में, सभी तत्व पृष्ठ के ऊपरी-बाएं कोने में ओवरले किए गए हैं। आदेश नियंत्रण जो छवि शीर्ष पर समाप्त होता है में, आप तो जैसे संपत्ति z- सूचकांक का उपयोग कर सकते हैं:

#imga 
{ 
z-index: 10; 
} 

#imgb 
{ 
z-index: 20; 
} 

#imgc 
{ 
z-index: 30; 
} 

यह imgc सामने दिखाई देते हैं, imgbimgc पीछे दिखाई देगा, और आईएमजी सब कुछ के पीछे। जेड-इंडेक्स संपत्ति असाइन करती है कि कौन सा तत्व दूसरे के सामने जाता है। सबसे महान जेड-इंडेक्स के साथ तत्व शीर्ष पर चला जाता है, इसके बाद दूसरा सबसे बड़ा और इसी तरह का होता है।

अपनी परियोजना के लिए, हम थोड़ा ऊपर कोड में और सुधार कर सकते हैं:

एचटीएमएल

<img id="layer1" src="img1.png"/> 
<img id="layer2" src="img2.png"/> 
<img id="layer3" src="img3.png"/> 

सीएसएस

img 
{ 
position:absolute; 
top: 0px; 
left: 0px; 
} 
#layer1 
{ 
    z-index: 10; 
} 
#layer2 
{ 
z-index: 20; 
} 

#layer3 
{ 
z-index: 30; 
} 

जब से तुम अब समझ में क्या निहित है जहां, तुम्हें पता है वह परत 3 शीर्ष पर है (सहायक उपकरण परत), परत 2 बीच में है (आपका व्यक्ति)। और layer1 नीचे (पृष्ठभूमि) पर है। तो फिर तुम तो जैसे सामान बना सकते हैं:

<img src="accessory1.png" onClick="setAccessory('accessory1.png');"/> 

और फिर जावास्क्रिप्ट का उपयोग करने के लिए, आप पहली परत के क्लिक किए गए सहायक के के बराबर src सेट कर सकते हैं।

function setAccessory(path){ 
    document.getElementById('layer1').src = path; 
    //if you're using jQuery, $("#layer1").attr("src", path); 
} 

आप जितना चाहें उतने सामान बना सकते हैं। मान लें कि आप अपने व्यक्ति के शीर्ष पर अधिक सहायक उपकरण जोड़ना चाहते हैं, फिर आप आसानी से अधिक परतें बना सकते हैं, अपने जेड-इंडेक्स को असाइन कर सकते हैं (और यह भी गतिशील रूप से जावास्क्रिप्ट का उपयोग करके, यह कितना रोमांचक है!)

निष्कर्ष में, मुझे आशा है कि आपको मिलेगा यह छोटा ट्यूटोरियल उपयोगी है। आपके उद्देश्यों के लिए, मैं jQuery के साथ-साथ तत्व को देखने का सुझाव देता हूं। वे उपयोग करने में मजा आएंगे और निश्चित रूप से आपके आवेदन में मदद करेंगे।

आपके आवेदन के साथ शुभकामनाएँ।

Answer 2

आपको स्थिति के संयोजन का उपयोग करना होगा: शीर्ष और बाएं स्थितियों के साथ पूर्ण, साथ ही साथ जेड-इंडेक्स शीर्ष पर दिखाई देने वाले नियंत्रणों को नियंत्रित करने के लिए।

Answer 3

मैं <canvas> टैग और एपीआई का उपयोग करने में देखता हूं।

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

आईई में पिछड़ा संगतता के लिए, आपको Google की Explorer Canvas जावास्क्रिप्ट प्लगइन का उपयोग करने की आवश्यकता होगी।

Answer 4

सीएसएस गुणों के संयोजन का उपयोग करके आप जो हासिल कर सकते हैं वह प्राप्त कर सकते हैं।

सही स्थान पर सहायक उपकरण को स्थान देने के लिए आप स्थिति को पूर्ण रूप से सेट कर सकते हैं और अपनी स्थिति निर्दिष्ट करने के लिए पूर्ण समन्वय का उपयोग कर सकते हैं।

जिस क्रम में वे प्रदर्शित करते हैं, उसे सेट करने के लिए आप जेड-इंडेक्स प्रॉपर्टी का उपयोग "स्टैक" करने के लिए कर सकते हैं।

चेक आउट:

http://www.html.net/tutorials/css/lesson15.php

उस पर कुछ विस्तृत जानकारी के लिए।

Answer 5

आप देख रहे हैं एक समाधान है कि कम कोड की आवश्यकता है के लिए, इस प्रयास करें:

1. एक अलग परत
2. सहेजें एक अलग छवि के रूप में हर परत पर में फ़ोटोशॉप अपनी कला बनाएँ, प्रत्येक गौण के साथ। सभी छवियों को पूर्ण कैनवास आकार बनाना सुनिश्चित करें, और पारदर्शिता का उपयोग करें। पीएनजी -24 के रूप में सहेजें। इस तरह, छवियों में प्रत्येक सहायक की स्थिति "हार्डकोड" होगी, इसलिए आपको कोड में इसे संभालना नहीं है।
3. एक कंटेनर <div> बनाएं, और इसे position: relative; दें।
4. कि <div> अंदर सभी छवियों रखो, <img> टैग के रूप में, सही क्रम (परतों ढेर, पृष्ठभूमि छवि पहले एक जा रहा है)
5. हर <img> पर position: absolute; लागू में।

यह आपको शुरू करना चाहिए। फिर प्रत्येक छवि को टॉगल करने के लिए jQuery का उपयोग करें क्योंकि उनके प्रतिनिधित्व वाले बटन क्लिक किए जाते हैं।

Answer 6

jQuery एनीमेशन का उपयोग करके, आप "ड्रैगगेबल" छवियां बना सकते हैं। अपनी छवियों को एक ऑनमोस्डउन इवेंट दें जो एक ऐसा फ़ंक्शन शुरू करता है जो आपके माउस एक्स क्षैतिज और वाई लंबवत पिक्सेल को वर्तमान माउस स्थान के आधार पर ले जाता है। JQuery के साथ माउस स्थान को कैसे ढूंढें, यह देखने के लिए इस लिंक को देखें। http://docs.jquery.com/Tutorials:Mouse_Position

या, बेहतर, jQuery UI "droppable" प्लगइन प्राप्त करें जो किसी भी तत्व को खींचें और कार्यक्षमता ड्रॉप करना आसान बनाता है। http://jqueryui.com/demos/droppable/

Answer 7

CSS3 का समर्थन करता है multiple background layers

#example1 { 
    width: 500px; 
    height: 250px; 
    background-image: url(sheep.png), url(betweengrassandsky.png); 
    background-position: center bottom, left top; 
    background-repeat: no-repeat; 
}