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

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

एक वेब पेज का उदाहरण

कदम

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



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

    सभी कोड की जांच करें आपका कोड मोटे तौर पर नीचे दिया गया एक जैसा होना चाहिए। कोड के साथ थोड़ा खेलना कोशिश करें और देखें कि क्या होता है।

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

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

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

    • एक पीसी
    • कोई भी पाठ संपादक
    • एक ब्राउज़र
    • दो अलग छवियाँ
    और पढ़ें ... (1)
    सामाजिक नेटवर्क पर साझा करें:

    संबद्ध

    © 2011—2022 GnuMani.com