জাভাস্ক্রিপ্টে মাউস ইভেন্ট দিয়ে ইমেজ রোলওভার দেখানো

মাউস ইভেন্ট দিয়ে ইমেজ রোলওভার দেখাতে নিচের কোডটি চালান −

উদাহরণ

<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' স্টেটমেন্ট ইমেজ অবজেক্টের অস্তিত্ব যাচাই করে। যদি ইমেজ অবজেক্ট অনুপলব্ধ হয়, তবে এই ব্লক এক্সিকিউট হবে না।
• Image() কনস্ট্রাক্টর image1 নামে একটি নতুন ইমেজ অবজেক্ট তৈরি এবং প্রিলোড করে।
• src প্রোপার্টিতে এক্সটার্নাল ইমেজ ফাইলের নাম /images/html.gif অ্যাসাইন করা হয়েছে।
• একইভাবে, আমরা image2 অবজেক্ট তৈরি করেছি এবং এতে /images/http.gif অ্যাসাইন করেছি।
• # (হ্যাশ মার্ক) লিংকটি ডিজেবল করে যাতে ক্লিক করলে ব্রাউজার কোনো URL-এ যেতে না পারে। এই লিংকটি একটি ইমেজ।
• onMouseOver ইভেন্ট হ্যান্ডলার তখন ট্রিগার হয় যখন ইউজারের মাউস লিংকের ওপর এসে পড়ে, এবং onMouseOut ইভেন্ট হ্যান্ডলার তখন ট্রিগার হয় যখন ইউজারের মাউস লিংক থেকে (ইমেজ থেকে) সরিয়ে যায়।