रोलओवर छवि एक छवि हो जुन केहि अन्य तस्विरमा परिवर्तन गर्दछ जब तपाईं वा ग्राहकले यो माथि माउस रोल गर्दछ। यी सामान्यतया एक अन्तरक्रियात्मक महसुस जस्तै बटनहरू वा ट्याबहरू सिर्जना गर्न प्रयोग गरिन्छ। तर तपाईं रोलओवर छविहरू केवल केहि पनि बाहिरबाट सिर्जना गर्न सक्नुहुनेछ।
यो ट्यूटोरियल डाइमवेभरमा रोलओभर छवि सिर्जना गर्न सहयोगको लागि डिजाइन गरिएको छ। यो Dreamweaver को निम्नलिखित संस्करणहरु को उपयोग गरेर मान्छे को उपयोग को लागि इरादा हो:
- Dreamweaver एमएक्स
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
यो ट्यूटोरियलका लागि आवश्यकताहरू
- Dreamweaver
माथि सूचीबद्ध संस्करणहरु मध्ये एक। - एक मूल छवि
यो छवि अनुकूलन गर्न निश्चित गर्नुहोस्। यसले तपाईंको पृष्ठहरू थप छिटो लोड गर्न मद्दत गर्नेछ। - रोलओवर छवि
यो छवि मौलिक छविको रूपमा समान आयाम हुनुपर्छ। र, मूल छवि जस्तै, पृष्ठ लोड समय मद्दत गर्न अनुकूलित हुनुपर्छ। - वेब पेज
यो एचटीएमएल पेज हो जहाँ तपाइँ आफ्नो रोलओवर छवि राख्नुहुनेछ।
01 को 06
सुरु गर
- Dreamweaver सुरू गर्नुहोस्
- वेब पृष्ठ खोल्नुहोस् जहाँ तपाईं आफ्नो रोलओवर चाहनुहुन्छ
02 को 06
रोओल्भर छवि छवि वस्तु सम्मिलित गर्नुहोस्
Dreamweaver ले रोलओवर छवि सिर्जना गर्न सजिलो बनाउँछ।
- घुसाउनुहोस् मेनुमा जानुहोस् र "छवि वस्तुहरू" उप-मेनुमा तल।
- "छवि रोलोओवर" वा "रोलोभर छवि" चयन गर्नुहोस्
Dreamweaver को केहि पुरानो संस्करणहरूको सट्टामा छवि वस्तुहरू "अन्तरक्रियात्मक छवि" लाई कल गर्दछ।
03 को 06
Dreamweaver लाई कुन छविहरू प्रयोग गर्न भन्नुहोस्
Dreamweaver एक rollover छवि सिर्जना गर्न को लागी फिल्ड को साथ संवाद संवाद बक्स छ।
तस्बिर नाम
पृष्ठको लागि अनुपयुक्त छवि नाम छान्नुहोस्। यो सबै एक शब्द हुनुपर्दछ, तर तपाईले नम्बरहरू, अन्डरसेर्स (_) र हाइफन (-) प्रयोग गर्न सक्नुहुनेछ। यो परिवर्तन गर्न छविको पहिचान गर्न प्रयोग गरिनेछ।
मौलिक छवि
यो छविको यूआरएल वा स्थान हो जुन पृष्ठमा सुरु हुनेछ। तपाईं यो क्षेत्रमा रिश्तेदार वा पूर्ण मार्ग URL प्रयोग गर्न सक्नुहुन्छ। यो एक छवि हो जुन तपाईंको वेब सर्भरमा अवस्थित छ वा तपाईंले पृष्ठको साथ अपलोड गर्नुहुनेछ।
रोलोभर छवि
यो छवि हो जुन तपाईं छविमा माउस हुँदा देखा पर्नुहुनेछ। मूल छवि जस्तै, छविको पूर्ण वा सापेक्षित मार्ग हुन सक्छ, र तपाईंले पृष्ठ अपलोड गर्दा अवस्थित वा अपलोड गर्नुपर्छ।
Preload रोलोभर छवि
यो विकल्प पूर्वनिर्धारितद्वारा चयन गरिएको छ किनभने यसले रोल्लोवर थप छिटो देखा पर्दछ। रोलओवर छवि पूर्वलोड गर्न छनौट गरेर, वेब ब्राउजरले यसलाई क्यासमा भण्डारण गर्दछ जब सम्म माउसले यसको माथि रोल गर्दछ।
वैकल्पिक पाठ
राम्रो वैकल्पिक पाठले तपाईंको तस्विरहरू थप पहुँचयोग्य बनाउँछ। तपाईंले कुनै पनि तस्बिर थप गर्दा केही प्रकारको वैकल्पिक पाठ प्रयोग गर्नुपर्दछ।
क्लिक गर्दा, URL मा जानुहोस्
प्रायः व्यक्तिहरूले छविमा क्लिक गर्दा छविमा क्लिक गर्नेछन्। त्यसैले तपाई तिनीहरूलाई क्लिक गर्न योग्य बनाउन आदतमा हुनुपर्दछ। यो विकल्पले तपाइँलाई छविमा क्लिक गर्न दर्शकलाई लिनको लागि पृष्ठ वा यूआरएल निर्दिष्ट गर्न अनुमति दिन्छ। तर यो विकल्पलाई रोल्लोवर सिर्जना गर्न आवश्यक छैन।
जब तपाइँ सबै क्षेत्रहरू पूरा गर्नुभयो, ठीक छ क्लिक गर्नुहोस् Dreamweaver लाई तपाईंको रोलओवर छवि सिर्जना गर्नुहोस्।
अर्को पृष्ठले स्क्रिप्टलाई देखाउँछ जुन Dreamweaver लेख्छ।
04 को 06
Dreamweaver तपाईंको लागि जाभास्क्रिप्ट लेख्दछ
यदि तपाईले कोड-हेराइमा पृष्ठ खोल्नुहुन्छ तपाईले देख्नु भएको छ कि Dreamweaver जाभास्क्रिप्टको ब्लकले तपाईंको HTML कागजातको
मा राख्छ। यस ब्लकमा तपाइँले छविहरू स्वैप गर्न आवश्यक हुँदा 3 प्रकार्यहरू समावेश गर्दछ जब माउसले उनीहरूमाथि रोल गर्दछ र पूर्वलोड प्रकार्य गर्दछ भने तपाईंले यसको लागि विकल्प दिनुभयो।कार्य MM_swapImgRestore ()
कार्य MM_findObj (n, d)
कार्य MM_swapImage ()
कार्य MM_preloadImages ()
05 को 06
Dreamweaver Rollover को लागि एचटीएमएल जोड्छ
यदि तपाईंले Dreamweaver रोलओवर छविहरू पूर्वलोड गर्नु भयो भने, तपाइँ पूर्वलोड लिपिको कल गर्नको लागि तपाइँको कागजातको शरीरमा एचटीएमएल कोड देख्नुहुनेछ ताकि तपाईका चित्रहरू छिट्टै लोड हुन्छ।
onload = "MM_preloadImages ('shasta2.jpg')"
Dreamweaver ले तपाईंको छविको लागि सबै कोड थप्छ र यसलाई लिङ्क गर्दछ (यदि तपाईंले URL मा समावेश गर्नुभयो भने)। रोल्लोभर भाग एन्मोहावर र ओममोआउट विशेषताहरूको रूपमा एंकर ट्यागमा थपिएको छ।
onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ('Image1', '', 'shasta1.jpg', 1)"
06 को 06
रोल्लोभर बाहिर जाँच गर्नुहोस्
पूर्ण कार्यात्मक रोलओवर छवि हेर्नुहोस् र शैस्ताको मनमा के सिक्नुहोस्।