একটি মাউস ইভেন্টের সাথে ইমেজ রোলওভার দেখাতে, আপনি নিম্নলিখিত কোডটি চালানোর চেষ্টা করতে পারেন -
উদাহরণ
<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 ব্যবহারকারীর মাউস যখন লিঙ্ক (ছবি) থেকে সরে যায় তখন ইভেন্ট হ্যান্ডলার ট্রিগার হয়।
