रोलओवर छवि एक ऐसी छवि होती है जो किसी अन्य छवि में बदलती है जब आप या आपका ग्राहक उस पर माउस डालता है। इन्हें आमतौर पर बटन या टैब जैसे इंटरैक्टिव अनुभव बनाने के लिए उपयोग किया जाता है। लेकिन आप रोलओवर छवियों को बस कुछ भी बना सकते हैं।
यह ट्यूटोरियल आपको Dreamweaver में रोलओवर छवि बनाने में मदद के लिए डिज़ाइन किया गया है। इसका उद्देश्य ड्रीमवेवर के निम्नलिखित संस्करणों का उपयोग करने वाले लोगों द्वारा उपयोग के लिए किया गया है:
- ड्रीमवेवर एमएक्स
- ड्रीमवेवर एमएक्स 2004
- ड्रीमवेवर 8
- ड्रीमवेवर सीएस 3
- ड्रीमवेवर सीएस 4
- ड्रीमवेवर सीएस 5
- ड्रीमवेवर सीएस 6
इस ट्यूटोरियल के लिए आवश्यकताएँ
- Dreamweaver
ऊपर सूचीबद्ध संस्करणों में से एक। - एक मूल छवि
इस छवि को अनुकूलित करने के लिए सुनिश्चित करें। यह आपके पृष्ठों को और अधिक तेज़ी से लोड करने में मदद करेगा। - रोलओवर छवि
यह छवि मूल छवि के समान आयाम होनी चाहिए। और, मूल छवि की तरह, पृष्ठ लोड समय की सहायता के लिए अनुकूलित किया जाना चाहिए। - एक वेब पेज
यह HTML पृष्ठ है जहां आप अपनी रोलओवर छवि डाल देंगे।
06 में से 01
शुरू हो जाओ
- Dreamweaver शुरू करें
- वह वेब पेज खोलें जहां आप अपना रोलओवर चाहते हैं
06 में से 02
रोलओवर छवि छवि ऑब्जेक्ट डालें
ड्रीमवेवर रोल रोल छवि बनाने में आसान बनाता है।
- सम्मिलित करें मेनू पर जाएं और नीचे "छवि ऑब्जेक्ट्स" उप-मेनू पर जाएं।
- "छवि रोलओवर" या "रोलओवर छवि" का चयन करें
ड्रीमवेवर के कुछ पुराने संस्करण इसके बजाय छवि ऑब्जेक्ट्स "इंटरेक्टिव इमेज" कहते हैं।
06 का 03
ड्रीमवेवर को बताएं कि कौन सी छवियां उपयोग करें
ड्रीमवेवर आपके रोलओवर छवि को बनाने के लिए भरने वाले फ़ील्ड के साथ एक संवाद बॉक्स पॉप करता है।
छवि का नाम
एक छवि नाम चुनें जो पृष्ठ के लिए अद्वितीय है। यह सब एक शब्द होना चाहिए, लेकिन आप संख्याओं, अंडरस्कोर (_) और हाइफ़न (-) का उपयोग कर सकते हैं। यह बदलने के लिए छवि की पहचान करने के लिए इस्तेमाल किया जाएगा।
मूल छवि
यह छवि का यूआरएल या स्थान है जो पेज पर शुरू होगा। आप इस क्षेत्र में सापेक्ष या पूर्ण पथ यूआरएल का उपयोग कर सकते हैं। यह एक ऐसी छवि होनी चाहिए जो आपके वेब सर्वर पर मौजूद हो या आप पेज के साथ अपलोड करेंगे।
रोलओवर छवि
यह वह छवि है जो छवि पर माउस के दौरान दिखाई देगी। मूल छवि की तरह, यह छवि के लिए एक पूर्ण या सापेक्ष पथ हो सकता है, और यह पृष्ठ अपलोड करते समय मौजूद होना चाहिए या अपलोड किया जाना चाहिए।
प्रीलोड रोलओवर छवि
यह विकल्प डिफ़ॉल्ट रूप से चुना जाता है क्योंकि यह रोलओवर को और अधिक तेज़ी से प्रकट करने में मदद करता है। रोलओवर छवि को प्रीलोड करने का चयन करके, वेब ब्राउजर इसे तब तक कैश में रखेगा जब तक कि माउस उस पर रोल न हो जाए।
वैकल्पिक पाठ
अच्छा वैकल्पिक पाठ आपकी छवियों को और अधिक सुलभ बनाता है। किसी भी छवि को जोड़ने के दौरान आपको हमेशा कुछ प्रकार के वैकल्पिक पाठ का उपयोग करना चाहिए।
क्लिक करने पर, यूआरएल पर जाएं
जब वे किसी पृष्ठ पर एक देखते हैं तो अधिकांश लोग छवि पर क्लिक करेंगे। तो आप उन्हें क्लिक करने योग्य बनाने की आदत में होना चाहिए। यह विकल्प आपको दर्शक को छवि पर क्लिक करने के लिए पृष्ठ या यूआरएल निर्दिष्ट करने की अनुमति देता है। लेकिन रोलओवर बनाने के लिए इस विकल्प की आवश्यकता नहीं है।
जब आप सभी फ़ील्ड पूरा कर लेंगे, तो Dreamweaver को अपनी रोलओवर छवि बनाने के लिए ठीक क्लिक करें।
अगला पृष्ठ स्क्रिप्ट दिखाता है कि ड्रीमवेवर लिखता है।
06 में से 04
Dreamweaver आपके लिए जावास्क्रिप्ट लिखता है
यदि आप कोड-व्यू में पृष्ठ खोलते हैं तो आप देखेंगे कि ड्रीमवेवर आपके HTML दस्तावेज़ के
में जावास्क्रिप्ट का एक ब्लॉक डालता है। इस ब्लॉक में 3 फ़ंक्शंस शामिल हैं जिन्हें आप छवियों को स्वैप करने की आवश्यकता रखते हैं जब माउस उनके ऊपर रोल करता है और प्रीलोड लोड फ़ंक्शन यदि आपने इसका चयन किया है।समारोह MM_swapImgRestore ()
समारोह MM_findObj (एन, डी)
समारोह MM_swapImage ()
समारोह MM_preloadImages ()
06 में से 05
Dreamweaver रोलओवर के लिए एचटीएमएल जोड़ता है
यदि आपने ड्रीमवेवर को रोलओवर छवियों को प्रीलोड करना चुना है, तो आपको प्रीलोड स्क्रिप्ट को कॉल करने के लिए अपने दस्तावेज़ के बॉडी में HTML कोड दिखाई देगा ताकि आपकी छवियां अधिक तेज़ी से लोड हो जाएं।
ऑनलोड = "MM_preloadImages ( 'shasta2.jpg')"
ड्रीमवेवर भी आपकी छवि के लिए सभी कोड जोड़ता है और इसे लिंक करता है (यदि आपने एक यूआरएल शामिल किया है)। रोलओवर भाग एंकर टैग में ऑनसाउसओवर और ऑनसाउसआउट विशेषताओं के रूप में जोड़ा जाता है।
onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ( 'Image1', '', 'shasta1.jpg', 1)"
06 में से 06
रोलओवर का परीक्षण करें
पूरी तरह कार्यात्मक रोलओवर छवि देखें और जानें कि शास्ता के दिमाग में क्या है।