ekterya.com

जावास्क्रिप्ट में प्रतिस्थापन छवि कैसे बनानी है

जावास्क्रिप्ट सबसे लोकप्रिय हल्के प्रोग्रामिंग भाषा है जो प्रमुख ब्राउज़रों में काम करता है, जैसे इंटरनेट एक्सप्लोरर, क्रोम, सफारी, फ़ायरफ़ॉक्स और ओपेरा। गतिशील और इंटरैक्टिव वेबसाइट बनाने के लिए उपयोग करना आसान भी है इसका एक उपयोगी विकल्प प्रतिस्थापन छवि है, जब आप मूल छवि पर माउस गुजरते समय एक छवि से दूसरी छवि में बदलते हैं। तब नई छवि मूल में वापस बदल जाएगी जब माउस चलता रहता है यह आलेख आपको दिखाएगा कि कदम से कदम कैसे करना है - इसलिए, बुनियादी HTML और जावास्क्रिप्ट ज्ञान की आवश्यकता है।

चरणों

1
प्रतिस्थापन प्रभाव के लिए दो छवियों को तैयार करें। प्रतिस्थापन छवि बनाने और उसी फ़ोल्डर में सहेजने के लिए दो अलग-अलग छवियों का चयन करें जहां आप प्रतिस्थापन छवि दिखाएंगे जो HTML फ़ाइल सहेज लेंगे।
  • Video: Week 9

    2
    अपनी पसंद के किसी पाठ संपादक को खोलें Dreamweaver इस आलेख में पाठ संपादक के रूप में उपयोग किया जाएगा अन्यथा, यदि आपका पाठ संपादक रिक्त होता है, तो उसे खोलने के लिए आपको एक वेब पेज बनाने के लिए HTML तत्व दर्ज करना होगा।
  • 3
    लेबल खोजें . jаvascript कोड को टैग के अंदर डाला जाएगा। छवियों को बदलने के लिए दो जावास्क्रिप्ट फ़ंक्शंस बनाए जाएंगे। दो फ़ंक्शंस नाम हैं MouseRollover और mouseout निम्नलिखित कोड में छवि के स्रोत की संपत्ति को छवि के स्रोत को बदलने के लिए उपयोग किया जाता है, जब उन दो फ़ंक्शन को कहा जाता है
  • 4
    निम्न जावास्क्रिप्ट कोड की प्रतिलिपि बनाएँ:
  • 5
    अपने पाठ संपादक में टैग के बीच जावास्क्रिप्ट कोड पेस्ट करें। आपको भाग को बदलना होगा MyPicture2.jpg फ़ंक्शन में MouseRollover आपकी प्रतिस्थापन छवि और भाग के नाम के साथ MyPicture1.jpg समारोह में कहा जाता है mouseout अपनी मूल छवि के नाम के साथ
  • Video: Hands-on with the Google Cloud Vision and Natural Language APIs with Romin Irani (GDD India '17)

    6
    लेबल खोजें . छवि का लेबल ”Title” प्रतिस्थापन छवि दिखाने के लिए लागू किया जाएगा इस उदाहरण में, Alt = "शीर्षक", जो छवि के शीर्षक के नाम को संदर्भित करता है, को छोड़ा गया है।
  • 7
    निम्न कोड की प्रतिलिपि बनाएँ:
  • 8



    लेबल के बीच कोड पेस्ट करें . संपत्ति onmouseover इसे ऊपर की छवि के टैग के अंदर जोड़ा जाता है और इसे जावास्क्रिप्ट फ़ंक्शन को कॉल करने के लिए सौंपा गया है प्रतिस्थापन छवि अपनी मूल छवि को नई प्रतिस्थापन छवि में बदलने के लिए बदल देता है MyPicture1.jpg अपनी मूल छवि के नाम के साथ दूसरी तरफ, दूसरी संपत्ति जिसे फोन किया जाता है onmouseout प्रतिस्थापन छवि से बाहर माउस को स्थानांतरित करके मूल को वापस छवि बदलने के लिए इसे जोड़ा गया है।
  • 9

    सभी कोड की जांच करें आपका कोड निम्न कोड जैसा होना चाहिए। आप इस उदाहरण में कोड के साथ खेल सकते हैं और देखें कि कैसे चीजें बदलती हैं

    जावास्क्रिप्ट छवि रोलओवर कैसे बनाएं
  • 10
    पर क्लिक करें "पुरालेख" और चयन करें "बचाना"।
  • 11
    HTML दस्तावेज़ को सहेजने के लिए एक नाम दर्ज करें। नाम "index.html" यह फाइल का परीक्षण करने के लिए प्रयोग किया जाता है चुनना "के रूप में सहेजें " HTML दस्तावेज़ों के विस्तार के लिए
  • 12

    Video: Web Programming - Computer Science for Business Leaders 2016

    बटन पर क्लिक करें "बचाना"।
  • 13
    एक ब्राउज़र में वेब पृष्ठ को पूरा करने के लिए पूर्वावलोकन का उपयोग करें। पर क्लिक करें "पुरालेख" और फिर विकल्प में जाने के लिए "ब्राउज़र में पूर्वावलोकन करें"। पर क्लिक करें "फ़ायरफ़ॉक्स" या आपके पाठ संपादक में स्थापित किसी भी वेब ब्राउज़र में।
  • युक्तियाँ

    • सुनिश्चित करें कि आपकी सहेजी गई HTML फ़ाइल उसी जगह पर रखे जहां आपके दो चित्र हैं
    -PrepareTwoImages.jpg" वर्ग ="छवि लाइटबॉक्स" शीर्षक ="अपने एचटीएमएल फ़ाइल के रूप में उसी फ़ोल्डर के भीतर अपने चित्र सहेजें।">
    • अपने HTML दस्तावेज़ को अधिक बार जब आप काम करते हैं तो सहेजें।
    • एक ब्राउज़र में पूर्ण वेब पेज का पूर्वावलोकन करने का दूसरा विकल्प यह है कि आप उस फ़ोल्डर में ब्राउजर आइकन पर क्लिक कर सकते हैं जहां वेब पेज प्रदर्शित करने के लिए आप अपने काम को बचाते हैं। छवि में, डिफ़ॉल्ट HTML फ़ाइल Dreamweaver में है, आप ठीक क्लिक कर सकते हैं और ब्राउज़र चुनें जो आपके कंप्यूटर पर इंस्टॉल है।
    खुली ब्राउज़र में folder.jpg" वर्ग ="छवि लाइटबॉक्स" शीर्षक ="अपना काम जांचने के लिए एक अन्य विकल्प">

    आप की आवश्यकता होगी चीजें

    • एक कंप्यूटर
    • कोई पाठ संपादक प्रोग्राम
    • एक इंटरनेट ब्राउज़र
    • दो अलग छवियाँ
    सामाजिक नेटवर्क पर साझा करें:

    संबद्ध
    © 2021 ekterya.com