मध्ये एक रोलओव्हर प्रतिमा तयार कसे Dreamweaver

एक रोलओव्हर प्रतिमा अशी प्रतिमा आहे जी जेव्हा आपण किंवा आपल्या ग्राहकाने तिच्यावर माऊस आणू तेव्हा काही अन्य प्रतिमेत बदलेल हे सामान्यत: परस्पर संवेदी तयार करण्यासाठी वापरले जातात जसे की बटणे किंवा टॅब परंतु आपण रोलओव्हर प्रतिमा अगदी अचूकपणे तयार करू शकता.

हे ट्यूटोरियल आपल्याला Dreamweaver मध्ये रोलओव्हर प्रतिमा तयार करण्यात मदत करण्यासाठी डिझाइन केले आहे. हे Dreamweaver च्या खालील आवृत्त्या वापरून लोक वापरण्यासाठी आहे:

• ड्रीमविव्हर एमएक्स
• Dreamweaver MX 2004
• स्वप्नवत 8
• Dreamweaver CS3
• Dreamweaver CS4
• Dreamweaver CS5
• Dreamweaver CS6

या प्रशिक्षणासाठी आवश्यकता

• स्वप्नवत
  वरील आवृत्तींपैकी एक
• मूळ प्रतिमा
  ही प्रतिमा ऑप्टिमाइझ करण्याची खात्री करा. हे आपल्या पृष्ठांना अधिक द्रुतगतीने लोड करण्यात मदत करेल.
• रोलओव्हर प्रतिमा
  ही प्रतिमा मूळ प्रतिमेसारखीच परिमाण असावी. आणि, मूळ प्रतिमेप्रमाणे, पृष्ठ लोड वेळासाठी मदत करण्यास ऑप्टिमायझ केले पाहिजे.
• एक वेब पृष्ठ
  हे HTML पृष्ठ आहे जेथे आपण आपल्या रोलओव्हर प्रतिमा ठेवू.

06 पैकी 01

सुरु करूया

1. प्रारंभ करा Dreamweaver
2. आपण आपल्या रोलओव्हरची इच्छित असलेली वेब पृष्ठ उघडा

06 पैकी 02

रोलओव्हर प्रतिमा प्रतिमा ऑब्जेक्ट समाविष्ट करा

Dreamweaver एक रोलओव्हर प्रतिमा तयार करणे सोपे करते.

1. समाविष्ट करा मेनूवर जा आणि "प्रतिमा ऑब्जेक्ट" उप-मेनूमधून जा.
2. "प्रतिमा रोलओव्हर" किंवा "रोलओव्हर प्रतिमा" निवडा

Dreamweaver च्या काही जुन्या आवृत्त्या त्याऐवजी प्रतिमा ऑब्जेक्ट "इंटरएक्टिव प्रतिमा" म्हणतो.

06 पैकी 03

कोणते प्रतिमा वापरण्यास Dreamweaver सांगा

आपले रोलओव्हर प्रतिमा तयार करण्यासाठी आपल्याला आवश्यक फील्डसह Dreamweaver डायलॉग बॉक्स पॉप करतात.

प्रतिमा नाव

पृष्ठासाठी अद्वितीय असलेली एक प्रतिमा नाव निवडा हे सर्व एक शब्द असावे, परंतु आपण संख्या, अंडरस्कोर (_) आणि हायफन (-) वापरू शकता. हे बदलण्यासाठी प्रतिमेस ओळखण्यासाठी वापरला जाईल.

मूळ प्रतिमा

हे URL किंवा पृष्ठाचे स्थान आहे जे पृष्ठावर प्रारंभ करेल आपण या क्षेत्रात रिलेटिव्ह किंवा संपूर्ण पथ URL वापरू शकता. हे आपल्या वेब सर्व्हरवर अस्तित्वात असलेले प्रतिमा असावे किंवा आपण पृष्ठासह अपलोड कराल.

रोलओव्हर प्रतिमा

ही प्रतिमा आहे जी प्रतिमावर जेव्हा आपण माउस होईल. मूळ प्रतिमेप्रमाणेच, हे प्रतिमेसाठी एक परिपूर्ण किंवा संबंधित मार्ग असू शकते आणि जेव्हा आपण पृष्ठ अपलोड कराल तेव्हा तो अस्तित्वात असावा किंवा अपलोड केला जावा

प्रीलोड रोलओव्हर प्रतिमा

हा पर्याय मुलभूतरित्या निवडलेला आहे कारण तो रोलओव्हरला अधिक द्रुतपणे दर्शविण्यास मदत करतो. रोलओव्हर प्रतिमा अगोदर लोड करणे निवडून, वेब ब्राउझर त्यास कॅशेमध्ये ठेवेल जोपर्यंत त्यावर माउस रोल होत नाही.

वैकल्पिक मजकूर

चांगला पर्यायी मजकूर आपल्या प्रतिमा अधिक प्रवेशयोग्य बनविते. आपण कोणत्याही प्रतिमा जोडताना काही वैकल्पिक मजकूर नेहमी वापरावा.

क्लिक केल्यावर, URL वर जा

बहुतेक लोक जेव्हा एका पृष्ठावर दिसत असतील तेव्हा ते एका प्रतिमेवर क्लिक करतील. म्हणून आपण त्यांना क्लिक करण्यायोग्य बनवण्याची सवय असावी. दर्शकांनी प्रतिमा वर क्लिक केल्यावर हे पर्याय आपल्याला पृष्ठ किंवा URL निर्दिष्ट करण्यास अनुमती देते. पण एक रोलओव्हर तयार करण्यासाठी या पर्यायाची आवश्यकता नाही.

जेव्हा आपण सर्व फील्ड पूर्ण केल्या, तेव्हा क्लिक करा ओके तुमच्या रोलओव्हर प्रतिमा तयार करा.

पुढील पृष्ठावर Dreamweaver लिहितात त्या लिपीची स्क्रिप्ट दर्शविली आहे.

04 पैकी 06

स्वप्नवत लेखक आपल्यासाठी जावास्क्रिप्ट लिहिते

आपण पेज-कोडमध्ये पहात असाल तर आपल्याला दिसेल की Dreamweaver JavaScript च्या ब्लॉकला आपल्या HTML दस्तऐवजाच्या मध्ये समाविष्ट करते. या ब्लॉकमध्ये 3 फंक्शन्स समाविष्ट आहेत ज्यात आपल्याला प्रतिमा स्वॅप असणे आवश्यक आहे जेव्हा माउस ने त्यांच्यावर रोल केले असेल आणि आपण ते निवडल्यास पूर्वलोड कार्य.

फंक्शन MM_swapImgRestore ()
फंक्शन MM_findObj (n, d)
फंक्शन MM_swapImage ()
कार्य MM_preloadImages ()

06 ते 05

ड्रीमइव्हर रोलओव्हरसाठी एचटीएमएल जोडतो

जर आपण ड्रीमइव्हरला रोलओव्हर प्रतिमांना प्रीलोड केले असे निवडले असेल तर आपण आपल्या डॉक्युमेंट्सच्या मुख्य भागामध्ये प्रीलोड स्क्रिप्ट कॉल करण्यासाठी HTML कोड पहाल जेणेकरून आपली प्रतिमा अधिक वेगाने लोड होईल.

onload = "MM_preloadImages ('shasta2.jpg')"

Dreamweaver आपल्या प्रतिमेसाठी सर्व कोड जोडते आणि त्यास लिंक करते (जर आपण URL समाविष्ट केले). रोलओव्हर भाग ऑन-होमओव्हर आणि ऑन-घाऊस विशेषता म्हणून अँकर टॅगमध्ये जोडला जातो.

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

06 06 पैकी

रोलओव्हर टेस्ट आउट

संपूर्ण कार्यात्मक रोलओव्हर प्रतिमा पहा आणि शास्तांच्या मनात काय आहे हे जाणून घ्या.