একটি রোলওভার চিত্রটি এমন একটি চিত্র যা অন্য কোনও ছবিতে পরিবর্তিত হয় যখন আপনি বা আপনার গ্রাহক এটির উপর মাউসটি চালান। এইগুলি সাধারণত বাটন বা ট্যাবগুলির মত ইন্টারেক্টিভ অনুভূতি তৈরি করতে ব্যবহৃত হয়। কিন্তু আপনি কিছু সম্পর্কে আউট রোলওভার ইমেজ তৈরি করতে পারেন।
এই টিউটোরিয়ালটি আপনাকে Dreamweaver এ রোলওভার চিত্র তৈরি করতে সহায়তা করার জন্য ডিজাইন করা হয়েছে। এটি Dreamweaver এর নিম্নোক্ত সংস্করণগুলি ব্যবহার করে লোকেদের ব্যবহারের উদ্দেশ্যে তৈরি করা হয়েছে:
- Dreamweaver এমএক্স
- ড্রিমওয়েভার এমএক্স 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver সিএস 5
- Dreamweaver CS6
এই টিউটোরিয়াল জন্য প্রয়োজনীয়তা
- ড্রিমউইভারউপরে তালিকাভুক্ত সংস্করণ এক।
- একটি মূল ছবিএই ইমেজ অপ্টিমাইজ করতে ভুলবেন না। এটি আপনার পৃষ্ঠাগুলিকে আরো দ্রুত লোড করতে সহায়তা করবে।
- রোলওভার ইমেজএই ছবিটির মূল চিত্র হিসাবে একই মাত্রা হওয়া উচিত। এবং, মূল চিত্রের মতো, পৃষ্ঠা লোড বারগুলি সাহায্য করতে অপ্টিমাইজ হওয়া উচিত।
- একটি ওয়েব পেজএটি HTML পৃষ্ঠা যেখানে আপনি আপনার রোলওভার চিত্রটি রাখবেন।
এবার শুরু করা যাক
- Dreamweaver শুরু করুন
- আপনি আপনার রোলওভার চান যেখানে ওয়েব পাতা খুলুন
একটি রোলওভার ইমেজ অবজেক্ট সন্নিবেশ করান
Dreamweaver একটি রোলওভার ইমেজ তৈরি করা সহজ করে তোলে।
- সন্নিবেশ মেনু এবং নিচে যান চিত্র বস্তু উপ-মেনু।
- নির্বাচন করা ছবি রোলওভার অথবা রোলওভার ইমেজ.
ড্রিমওয়েভারের কিছু পুরোনো সংস্করণগুলি পরিবর্তে চিত্র অবজেক্টগুলি "ইন্টারেক্টিভ চিত্র" কল করে।
Dreamweaver বলুন কি ছবি ব্যবহার করতে
ড্রিমওয়েভার আপনার রোলওভার চিত্রটি তৈরি করতে আপনার যে ফিল্ডগুলি পূরণ করতে হবে সেগুলির সাথে একটি ডায়লগ বাক্স পপ করে।
চিত্র নাম
একটি ছবির নাম চয়ন করুন যা পৃষ্ঠাটির জন্য অনন্য। এটি সমস্ত একটি শব্দ হওয়া উচিত, তবে আপনি সংখ্যা, underscores (_) এবং হাইফেন (-) ব্যবহার করতে পারেন। এটি পরিবর্তন করার জন্য চিত্র সনাক্ত করতে ব্যবহার করা হবে।
মূল চিত্র
এটি এমন URL বা অবস্থানের অবস্থান যা পৃষ্ঠাতে শুরু হবে। আপনি এই ক্ষেত্রে আপেক্ষিক বা পরম পাথ URL ব্যবহার করতে পারেন। এটি এমন একটি চিত্র হওয়া উচিত যা আপনার ওয়েব সার্ভারে বিদ্যমান বা আপনি পৃষ্ঠাটির সাথে আপলোড করবেন।
রোলওভার ইমেজ
এটি এমন চিত্র যা আপনি যখন ছবিতে মাউস দেখেন তখন উপস্থিত হবে। মূল চিত্রের মতোই, এটি চিত্রটির একটি সম্পূর্ণ বা আপেক্ষিক পথ হতে পারে এবং এটি পৃষ্ঠাটি আপলোড করার সময় এটি বিদ্যমান বা আপলোড হওয়া উচিত।
Preload রোলওভার ইমেজ
ডিফল্টভাবে এই বিকল্পটি নির্বাচন করা হয় কারণ এটি রোলওভারকে আরো দ্রুত প্রদর্শিত করতে সহায়তা করে। রোলওভার চিত্রটি লোড করতে চয়ন করে, ওয়েব ব্রাউজারটি মাউসগুলি রোল না হওয়া পর্যন্ত এটি একটি ক্যাশে সংরক্ষণ করবে।
বিকল্প টেক্সট
ভাল বিকল্প টেক্সট আপনার ইমেজ আরও অ্যাক্সেসযোগ্য করে তোলে। কোন ছবি যোগ করার সময় আপনাকে সবসময় কোনও বিকল্প পাঠ্য ব্যবহার করতে হবে।
ক্লিক করার সময়, URL এ যান
বেশিরভাগ লোকেরা যখন একটি পৃষ্ঠায় একটি দেখতে পাবে তখন একটি ছবিতে ক্লিক করবে। তাই আপনি তাদের ক্লিকযোগ্য করতে অভ্যাস থাকা উচিত। এই বিকল্পটি প্রদর্শকটিকে ছবিতে ক্লিক করার সময় পৃষ্ঠা বা URL নির্দিষ্ট করতে আপনাকে অনুমতি দেয়। কিন্তু এই বিকল্পটি রোলওভার তৈরি করার প্রয়োজন নেই।
যখন আপনি সমস্ত ক্ষেত্র সম্পন্ন করেছেন, ক্লিক করুন ঠিক আছে Dreamweaver আপনার রোলওভার ইমেজ তৈরি করতে।
Dreamweaver আপনার জন্য জাভাস্ক্রিপ্ট লিখেছেন
যদি আপনি কোড-ভিউতে পৃষ্ঠাটি খুলেন তবে আপনি দেখতে পাবেন যে Dreamweaver জাভাস্ক্রিপ্টের একটি ব্লক প্রবেশ করে
আপনার এইচটিএমএল নথি। এই ব্লকটি আপনাকে 3 টি ফাংশন অন্তর্ভুক্ত করে যখন আপনার মাউসগুলি যখন তাদের উপর রোলস করে এবং প্রিলোড ফাংশনটি পছন্দ করে তখন ছবিগুলি স্য্যাপ করতে হবে।
ফাংশন MM_swapImgRestore ()ফাংশন MM_findObj (এন, ডি)ফাংশন MM_swap ইমেজ ()ফাংশন MM_preload ইমেজ () আপনি যদি ড্রিমওয়েভারটি রোলওভার চিত্রগুলি লোড করতে পছন্দ করেন তবে আপনার প্রক্সি স্ক্রিপ্টটি কল করতে আপনার নথির শরীরের এইচটিএমএল কোডটি দেখতে পাবেন যাতে আপনার চিত্র আরো দ্রুত লোড হয়। লোড থাকলে = "MM_preloadImages ( 'shasta2.jpg')" Dreamweaver এছাড়াও আপনার ইমেজ জন্য সব কোড যোগ করে এবং এটি লিঙ্ক (যদি আপনি একটি ইউআরএল অন্তর্ভুক্ত)। Rollover অংশ onmouseover এবং onmouseout গুণাবলী হিসাবে নোঙ্গর ট্যাগ যোগ করা হয়। onmouseout = "MM_swapImgRestore ()"onmouseover = "MM_swapImage ( 'Image1', '', 'shasta1.jpg', 1)" সম্পূর্ণ কার্যকরী রোলওভার চিত্রটি দেখুন এবং শস্তার মনের উপর যা শিখছেন তা শিখুন। Dreamweaver রোলওভার জন্য এইচটিএমএল যোগ করে
রোলওভার পরীক্ষা আউট
