1
रोलओवर प्रभाव के लिए दो छवियां तैयार करें एक रोलओवर छवि बनाने के लिए दो अलग-अलग छवियों का चयन करें और उन्हें उसी फ़ोल्डर में सहेजें जहां आप अपने HTML को सहेज लेंगे जो चित्र प्रदर्शित करेगा।
2
अपनी पसंद के किसी पाठ संपादक को खोलें इस लेख में ड्रीमइवेर का पाठ संपादक के रूप में उपयोग किया जाएगा अन्यथा, यदि आपका पाठ संपादक इसे खोलने पर रिक्त है, तो आपको पृष्ठ बनाने के लिए HTML तत्व दर्ज करना होगा।
3
अनुभाग ढूंढें . jаvascript कोड को टैग के अंदर डाला जाएगा . जावास्क्रिप्ट में दो फ़ंक्शंस छवियों को बदलने के लिए बनाए जाएंगे। दो कार्यों को कहा जाएगा MouseRollover और mouseout नीचे दिए गए कोड में छवि के स्रोत की संपत्ति का उपयोग छवि स्रोत को बदलने के लिए किया जाएगा, जब ये दो फ़ंक्शन कहा जाता है।
4
निम्न जावास्क्रिप्ट कोड की प्रतिलिपि बनाएँ: 5
अनुभाग के बीच जावास्क्रिप्ट कोड पेस्ट करें आपके टेक्स्ट एडिटर में MyPicture2.jpg फ़ंक्शन में MouseRollover रोलओवर के लिए आपकी छवि के नाम से प्रतिस्थापित किया जाना चाहिए और MyPicture1.jpg फ़ंक्शन में mouseout मूल छवि नाम से प्रतिस्थापित किया जाना चाहिए
6
अनुभाग ढूंढें . छवि टैग रोलओवर छवि प्रदर्शित करने के लिए लागू किया जाएगा। इस उदाहरण में, विशेषता Alt = "शीर्षक" छवि का शीर्षक छोड़ा जाएगा।
7
निम्न कोड की प्रतिलिपि बनाएँ:
8
कोड को बीच में पेस्ट करें . संपत्ति onmouseover ऊपर दिए गए छवि टैग में जोड़ा गया जावास्क्रिप्ट फ़ंक्शन को कॉल करने के लिए उपयोग किया जाएगा ImageRollover अपनी मूल छवि को नई रोलओवर छवि में बदलने के लिए बदलें MyPicture1.jpg मूल छवि नाम से इसके अलावा, अन्य संपत्ति को बुलाया onmouseout छवि रोलओवर छवि के शीर्ष से हटा दिया गया है जब मूल वापस छवि को बदलने के लिए जोड़ा गया है।
9
कोड की समीक्षा करें आपका कोड नीचे दिए गए कोड की तरह दिखना चाहिए। आप इस उदाहरण में कोड के साथ खेल सकते हैं और देखें कि कैसे चीजें बदलती हैं
जावास्क्रिप्ट के साथ एक छवि रोलओवर कैसे बनाएं
10
"फ़ाइल" पर क्लिक करें और "सहेजें" चुनें।
11
अपने HTML दस्तावेज़ को सहेजने के लिए एक नाम दर्ज करें। फ़ाइल का परीक्षण करने के लिए "Index.html" का उपयोग किया जाता है दस्तावेज़ को सहेजने के लिए "इस रूप में सहेजें ..." चुनें
12
"सहेजें" बटन पर क्लिक करें
13
एक ब्राउज़र में पूरा पेज देखें "फ़ाइल" पर क्लिक करें और फिर "ब्राउज़र में पूर्वावलोकन करें" पर क्लिक करें। "फ़ायरफ़ॉक्स" पर क्लिक करें या पाठ संपादक में स्थापित ब्राउज़र चुनें।