Dreamweaver में रोलओवर छवि बनाने के लिए ट्यूटोरियल

रोलओवर छवि एक ऐसी छवि होती है जो किसी अन्य छवि में बदलती है जब आप या आपका ग्राहक उस पर माउस डालता है। इन्हें आमतौर पर बटन या टैब जैसे इंटरैक्टिव अनुभव बनाने के लिए उपयोग किया जाता है। लेकिन आप रोलओवर छवियों को बस कुछ भी बना सकते हैं।

यह ट्यूटोरियल आपको Dreamweaver में रोलओवर छवि बनाने में मदद के लिए डिज़ाइन किया गया है। इसका उद्देश्य ड्रीमवेवर के निम्नलिखित संस्करणों का उपयोग करने वाले लोगों द्वारा उपयोग के लिए किया गया है:

• ड्रीमवेवर एमएक्स
• ड्रीमवेवर एमएक्स 2004
• ड्रीमवेवर 8
• ड्रीमवेवर सीएस 3
• ड्रीमवेवर सीएस 4
• ड्रीमवेवर सीएस 5
• ड्रीमवेवर सीएस 6

इस ट्यूटोरियल के लिए आवश्यकताएँ

• Dreamweaverऊपर सूचीबद्ध संस्करणों में से एक।
• एक मूल छविइस छवि को अनुकूलित करने के लिए सुनिश्चित करें। यह आपके पृष्ठों को और अधिक तेज़ी से लोड करने में मदद करेगा।
• रोलओवर छवियह छवि मूल छवि के समान आयाम होनी चाहिए। और, मूल छवि की तरह, पृष्ठ लोड समय की सहायता के लिए अनुकूलित किया जाना चाहिए।
• एक वेब पेजयह HTML पृष्ठ है जहां आप अपनी रोलओवर छवि डाल देंगे।

शुरू हो जाओ

1. Dreamweaver शुरू करें
2. वह वेब पेज खोलें जहां आप अपना रोलओवर चाहते हैं

रोलओवर छवि ऑब्जेक्ट डालें

ड्रीमवेवर रोल रोल छवि बनाने में आसान बनाता है।

1. सम्मिलित करें मेनू पर जाएं और नीचे जाएं छवि वस्तुओं उप-मेनू।
2. चुनते हैं छवि रोलओवर या रोलओवर छवि.

ड्रीमवेवर के कुछ पुराने संस्करण इसके बजाय छवि ऑब्जेक्ट्स "इंटरेक्टिव इमेज" कहते हैं।

ड्रीमवेवर को बताएं कि कौन सी छवियां उपयोग करें

ड्रीमवेवर आपके रोलओवर छवि को बनाने के लिए भरने वाले फ़ील्ड के साथ एक संवाद बॉक्स पॉप करता है।

छवि का नाम

एक छवि नाम चुनें जो पृष्ठ के लिए अद्वितीय है। यह सब एक शब्द होना चाहिए, लेकिन आप संख्याओं, अंडरस्कोर (_) और हाइफ़न (-) का उपयोग कर सकते हैं। यह बदलने के लिए छवि की पहचान करने के लिए इस्तेमाल किया जाएगा।

मूल छवि

यह छवि का यूआरएल या स्थान है जो पेज पर शुरू होगा। आप इस क्षेत्र में सापेक्ष या पूर्ण पथ यूआरएल का उपयोग कर सकते हैं। यह एक ऐसी छवि होनी चाहिए जो आपके वेब सर्वर पर मौजूद हो या आप पेज के साथ अपलोड करेंगे।

रोलओवर छवि

यह वह छवि है जो छवि पर माउस के दौरान दिखाई देगी। मूल छवि की तरह, यह छवि के लिए एक पूर्ण या सापेक्ष पथ हो सकता है, और यह पृष्ठ अपलोड करते समय मौजूद होना चाहिए या अपलोड किया जाना चाहिए।

प्रीलोड रोलओवर छवि

यह विकल्प डिफ़ॉल्ट रूप से चुना जाता है क्योंकि यह रोलओवर को और अधिक तेज़ी से प्रकट करने में मदद करता है। रोलओवर छवि को प्रीलोड करने का चयन करके, वेब ब्राउजर इसे तब तक कैश में रखेगा जब तक कि माउस उस पर रोल न हो जाए।

वैकल्पिक पाठ

अच्छा वैकल्पिक पाठ आपकी छवियों को और अधिक सुलभ बनाता है। किसी भी छवि को जोड़ने के दौरान आपको हमेशा कुछ प्रकार के वैकल्पिक पाठ का उपयोग करना चाहिए।

क्लिक करने पर, यूआरएल पर जाएं

जब वे किसी पृष्ठ पर एक देखते हैं तो अधिकांश लोग छवि पर क्लिक करेंगे। तो आप उन्हें क्लिक करने योग्य बनाने की आदत में होना चाहिए। यह विकल्प आपको दर्शक को छवि पर क्लिक करने के लिए पृष्ठ या यूआरएल निर्दिष्ट करने की अनुमति देता है। लेकिन रोलओवर बनाने के लिए इस विकल्प की आवश्यकता नहीं है।

जब आप सभी फ़ील्ड पूरा कर लेंगे, तो क्लिक करें ठीक Dreamweaver अपनी रोलओवर छवि बनाने के लिए।

Dreamweaver आपके लिए जावास्क्रिप्ट लिखता है

यदि आप कोड-व्यू में पृष्ठ खोलते हैं तो आप देखेंगे कि ड्रीमवेवर जावास्क्रिप्ट का एक ब्लॉक डालता है आपके एचटीएमएल दस्तावेज़ का। इस ब्लॉक में 3 फ़ंक्शंस शामिल हैं जिन्हें आप छवियों को स्वैप करने की आवश्यकता रखते हैं जब माउस उनके ऊपर रोल करता है और प्रीलोड लोड फ़ंक्शन यदि आपने इसका चयन किया है।

समारोह MM_swapImgRestore ()समारोह MM_findObj (एन, डी)समारोह MM_swapImage ()समारोह MM_preloadImages ()

Dreamweaver रोलओवर के लिए एचटीएमएल जोड़ता है

यदि आपने ड्रीमवेवर को रोलओवर छवियों को प्रीलोड करना चुना है, तो आपको प्रीलोड स्क्रिप्ट को कॉल करने के लिए अपने दस्तावेज़ के बॉडी में HTML कोड दिखाई देगा ताकि आपकी छवियां अधिक तेज़ी से लोड हो जाएं।

ऑनलोड = "MM_preloadImages ( 'shasta2.jpg')"

ड्रीमवेवर भी आपकी छवि के लिए सभी कोड जोड़ता है और इसे लिंक करता है (यदि आपने एक यूआरएल शामिल किया है)। रोलओवर भाग एंकर टैग में ऑनसाउसओवर और ऑनसाउसआउट विशेषताओं के रूप में जोड़ा जाता है।

onmouseout = "MM_swapImgRestore ()"onmouseover = "MM_swapImage ( 'Image1', '', 'shasta1.jpg', 1)"

रोलओवर का परीक्षण करें

पूरी तरह कार्यात्मक रोलओवर छवि देखें और जानें कि शास्ता के दिमाग में क्या है।