मैं जावास्क्रिप्ट में माउस इवेंट के साथ छवि रोलओवर कैसे दिखा सकता हूं?

माउस ईवेंट के साथ छवि रोलओवर दिखाने के लिए, आप निम्न कोड चलाने का प्रयास कर सकते हैं -

उदाहरण

<html>
   <head>
      <title>Rollover with a Mouse Event</title>
      <script>
         <!--
            if(document.images) {
               var image1 = new Image(); // Preload an image
               image1.src = "/images/html.gif";
               var image2 = new Image(); // Preload second image
               image2.src = "/images/http.gif";
            }
         //-->
      </script>
   </head>
   <body>
      <p>Move your mouse over the image to see the result</p>

      <a href = "#" onMouseOver = "document.myImage.src = image2.src;" onMouseOut = "document.myImage.src = image1.src;">
         <img name = "myImage" src = "/images/html.gif" />
      </a>
   </body>
</html>

आइए देखते हैं कि हमने एनीमेशन को स्वचालित करने के लिए उपरोक्त उदाहरण में क्या उपयोग किया है -

इस पेज को लोड करते समय, 'if' स्टेटमेंट इमेज ऑब्जेक्ट के अस्तित्व की जांच करता है। यदि छवि वस्तु अनुपलब्ध है, तो यह ब्लॉक निष्पादित नहीं किया जाएगा।
द छवि () कंस्ट्रक्टर image1 . नामक एक नई इमेज ऑब्जेक्ट बनाता और प्रीलोड करता है ।
src गुण को बाहरी छवि फ़ाइल का नाम दिया गया है जिसे /images/html.gif कहा जाता है।
इसी तरह, हमने एक image2 ऑब्जेक्ट बनाया है और इस ऑब्जेक्ट में /images/http.gif असाइन किया है।
# (हैश मार्क) लिंक को निष्क्रिय कर देता है ताकि क्लिक करने पर ब्राउज़र किसी URL पर जाने की कोशिश न करे। यह लिंक एक छवि है।
द ऑनमाउसओवर ईवेंट हैंडलर तब ट्रिगर होता है जब उपयोगकर्ता का माउस लिंक पर चला जाता है, और onMouseOut ईवेंट हैंडलर तब ट्रिगर होता है जब उपयोगकर्ता का माउस लिंक (छवि) से दूर चला जाता है।