IhsAdke.com

जावास्क्रिप्ट के साथ एक छवि रोलओवर कैसे बनाएं

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

चरणों

1
रोलओवर प्रभाव के लिए दो छवियां तैयार करें एक रोलओवर छवि बनाने के लिए दो अलग-अलग छवियों का चयन करें और उन्हें उसी फ़ोल्डर में सहेजें जहां आप अपने HTML को सहेज लेंगे जो चित्र प्रदर्शित करेगा।
  • 2
    अपनी पसंद के किसी पाठ संपादक को खोलें इस लेख में ड्रीमइवेर का पाठ संपादक के रूप में उपयोग किया जाएगा अन्यथा, यदि आपका पाठ संपादक इसे खोलने पर रिक्त है, तो आपको पृष्ठ बनाने के लिए HTML तत्व दर्ज करना होगा।
  • 3
    अनुभाग ढूंढें . jаvascript कोड को टैग के अंदर डाला जाएगा . जावास्क्रिप्ट में दो फ़ंक्शंस छवियों को बदलने के लिए बनाए जाएंगे। दो कार्यों को कहा जाएगा MouseRollover और mouseout नीचे दिए गए कोड में छवि के स्रोत की संपत्ति का उपयोग छवि स्रोत को बदलने के लिए किया जाएगा, जब ये दो फ़ंक्शन कहा जाता है।
  • 4
    निम्न जावास्क्रिप्ट कोड की प्रतिलिपि बनाएँ:
  • 5
    अनुभाग के बीच जावास्क्रिप्ट कोड पेस्ट करें आपके टेक्स्ट एडिटर में MyPicture2.jpg फ़ंक्शन में MouseRollover रोलओवर के लिए आपकी छवि के नाम से प्रतिस्थापित किया जाना चाहिए और MyPicture1.jpg फ़ंक्शन में mouseout मूल छवि नाम से प्रतिस्थापित किया जाना चाहिए
  • 6
    अनुभाग ढूंढें . छवि टैग ”Título” रोलओवर छवि प्रदर्शित करने के लिए लागू किया जाएगा। इस उदाहरण में, विशेषता Alt = "शीर्षक" छवि का शीर्षक छोड़ा जाएगा।
  • 7
    निम्न कोड की प्रतिलिपि बनाएँ:



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

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

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

    • अपनी छवियों को उसी स्थान पर सहेजा गया HTML फ़ाइल रखना सुनिश्चित करें जहां आपकी छवियां हैं
    • कार्य के दौरान अपने HTML दस्तावेज़ को अधिक बार सहेजें
    • ब्राउज़र में अपना पृष्ठ देखने का एक और विकल्प है कि फ़ोल्डर में सहेजे गए पृष्ठ के आइकन को क्लिक करें जहां उसे ब्राउज़र में खोलना है। छवि में, डिफ़ॉल्ट HTML फ़ाइल Dreamweaver में है, लेकिन आप राइट-क्लिक कर सकते हैं और अपने कंप्यूटर पर स्थापित ब्राउज़र चुन सकते हैं।

    आवश्यक सामग्री

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

    सूत्रों और कोटेशन

    और पढ़ें ... (1)
    सामाजिक नेटवर्क पर साझा करें:

    संबद्ध
    © 2021 IhsAdke.com