यह पोस्ट जावास्क्रिप्ट में हॉवर पर इमेज बदलने की प्रक्रिया को प्रदर्शित करेगी।
जावास्क्रिप्ट में होवर पर एक छवि कैसे बदलें?
होवर पर छवि बदलने के लिए, 'का उपयोग करें' मूषक के ऊपर से ' प्रतिस्पर्धा। जब माउस/कर्सर को HTML तत्व या उसके बच्चों में से एक के माध्यम से ले जाया जाता है, तो ऑनमाउसओवर ईवेंट चालू हो जाता है।
उदाहरण 1: जावास्क्रिप्ट में होवर पर इमेज बदलें
HTML फ़ाइल में, वेब पेज पर छवि दिखाने के लिए टैग का उपयोग करें। संलग्न करें ' मूषक के ऊपर से ” घटना जो छवि पर माउस के होवर करने पर जावास्क्रिप्ट फ़ंक्शन को कॉल करेगी:
< आईएमजी आईडी = 'मेनूआईएमजी' स्रोत = '1.जेपीजी' मूषक के ऊपर से = 'होवर (यह);' />
जावास्क्रिप्ट फ़ाइल में, एक फ़ंक्शन परिभाषित करें ' मंडराना 'पैरामीटर के साथ' आईएमजी ”। परिभाषित फ़ंक्शन में, होवर पर दिखाई देने वाली छवि सेट करें:
समारोह मंडराना ( आईएमजी )
{
img. स्रोत = '2.जेपीजी'
}
जैसा कि आप देख सकते हैं, आउटपुट में, जब हम वर्तमान छवि पर होवर करते हैं, तो यह अचानक बदल जाती है:
उदाहरण 2: होवर पर इमेज को टॉगल करें
उपरोक्त उदाहरण में, जब माउस छवि पर मँडरा रहा होता है, तो छवि बदल जाती है, और वही छवि बनी रहती है। अब, इस उदाहरण में, माउस के छवि से बाहर जाने पर पहली छवि फिर से दिखाई देगी। इस प्रभाव को टॉगल प्रभाव कहा जाता है। इस प्रयोजन के लिए, हम 'का प्रयोग करेंगे मूषक के ऊपर से ' तथा ' onmouseout 'एचटीएमएल गुण:
< आईएमजी आईडी = 'मेनूआईएमजी' स्रोत = '1.जेपीजी' मूषक के ऊपर से = 'होवर (यह);' onmouseout = 'होवरआउट (यह)' />
' मूषक के ऊपर से 'बुलाता है' हॉवर () 'कार्य करते समय,' onmouseout 'ईवेंट फ़ंक्शन को कॉल करता है' होवरआउट () ':
समारोह होवरआउट ( आईएमजी ) {img. स्रोत = '1.जेपीजी'
}
आउटपुट से पता चलता है कि जब माउस छवि के ऊपर होता है तो छवि सफलतापूर्वक बदल जाती है और जब माउस छवि से बाहर जा रहा होता है तो इसे बदल दिया जाता है:
यह होवर पर बदलती छवि के बारे में था।
निष्कर्ष
होवर पर छवि बदलने के लिए, 'का उपयोग करें' मूषक के ऊपर से ' प्रतिस्पर्धा। टॉगल प्रभाव के लिए, 'का प्रयोग करें मूषक के ऊपर से 'के साथ विशेषता' onmouseout ' प्रतिस्पर्धा। जब माउस/कर्सर को किसी तत्व या उसके बच्चों में से एक के माध्यम से ले जाया जाता है, तो ऑनमाउसओवर ईवेंट चालू हो जाता है, जबकि जब माउस/पॉइंटर को किसी तत्व से बाहर ले जाया जाता है, तो ऑनमाउसआउट ईवेंट होता है। इस पोस्ट में, हमने जावास्क्रिप्ट में होवर पर छवि बदलने की प्रक्रिया का प्रदर्शन किया।