একটি রোলওভার ইমেজ এমন একটি চিত্র যা অন্য কোনও চিত্রে পরিবর্তিত হয় যখন আপনি বা আপনার গ্রাহক তার উপর মাউসটি চালান। এটি সাধারণত একটি ইন্টারেক্টিভ অনুভূতি যেমন বোতাম বা ট্যাব তৈরি করতে ব্যবহৃত হয়। কিন্তু আপনি রোলওর ইমেজ তৈরি করতে পারেন প্রায় কিছুই সম্পর্কে।
এই টিউটোরিয়াল আপনাকে ড্রিমওয়েভারের একটি রোলওভার চিত্র তৈরি করতে সহায়তা করার জন্য ডিজাইন করা হয়েছে। এটি Dreamweaver এর নিম্নোক্ত সংস্করণগুলি ব্যবহার করে লোকেদের জন্য ব্যবহার করা হয়:
- ড্রিমওয়েভার এমএক্স
- ড্রিমওয়েভার এমএক্স ২004
- ড্রিমওয়েভার 8
- ড্রিমওয়েভার CS3
- ড্রিমওয়েভার CS4
- ড্রিমওয়েভার CS5
- ড্রিমওয়েভার CS6
এই টিউটোরিয়াল জন্য প্রয়োজনীয়তা
- ড্রিমউইভার
উপরে তালিকাভুক্ত একটি সংস্করণ। - একটি মূল ছবি
এই ছবিটি অপটিমাইজ করতে ভুলবেন না। এটি আপনার পৃষ্ঠাগুলিকে আরও দ্রুত লোড করতে সাহায্য করবে। - রোলওভার চিত্র
এই ইমেজ মূল চিত্র হিসাবে একই মাত্রা হওয়া উচিত। এবং, আসল চিত্রের মতো, পৃষ্ঠার লোড বারগুলি সাহায্য করার জন্য অপ্টিমাইজ করা উচিত। - একটি ওয়েব পেজ
এটি এইচটিএমএল পৃষ্ঠা যেখানে আপনি আপনার রোলওভার ইমেজ রাখুন।
06 এর 01
এবার শুরু করা যাক
- ড্রিমওয়েভার শুরু করুন
- আপনি আপনার রোলওভার চান যেখানে ওয়েব পৃষ্ঠা খুলুন
06 এর 02
একটি রোলওভার চিত্র চিত্র বস্তু ঢোকান
ড্রিমওয়েভার একটি রোলওভার চিত্র তৈরি করা সহজ করে তোলে।
- সন্নিবেশ মেনুতে যান এবং নীচে "চিত্র বস্তু" উপমেনুতে যান।
- "চিত্র রোলওভার" বা "রোলওভার চিত্র" নির্বাচন করুন
ড্রিমওয়েভারের কিছু পুরোনো সংস্করণগুলি পরিবর্তে ইমেজ অবজেক্ট "ইন্টারেক্টিভ ইমেজ" কল করে।
06 এর 03
ড্রিমওয়েভার বলুন কি ইমেজ ব্যবহার করতে হবে
ড্রিমওয়েভার আপনার রোলওভার ইমেজ তৈরি করতে পূরণ করার জন্য ক্ষেত্রগুলির সাথে একটি ডায়লগ বক্সটি পপ করে।
চিত্রের নাম
পৃষ্ঠার জন্য অনন্য একটি ছবির নাম চয়ন করুন এটি সব এক শব্দ হওয়া উচিত, কিন্তু আপনি সংখ্যা, আন্ডারস্কোর (_) এবং হাইফেন (-) ব্যবহার করতে পারেন। এই ছবিটি পরিবর্তন করতে চিত্রটি চিহ্নিত করা হবে।
মূল চিত্র
এটি সেই URL এর URL বা অবস্থান যা পৃষ্ঠায় শুরু হবে। আপনি এই ক্ষেত্রে আপেক্ষিক বা পরম পাথ URL ব্যবহার করতে পারেন। এটি এমন একটি চিত্র হওয়া উচিত যা আপনার ওয়েব সার্ভারে বিদ্যমান থাকে বা আপনি পৃষ্ঠাটি আপলোড করবেন।
রোলওভার চিত্র
এই ইমেজ যে ইমেজ উপর আপনি মাউস প্রদর্শিত হবে। মূল ছবির মতই, এটি ইমেজটির একটি পরম বা আপেক্ষিক পাথ হতে পারে, এবং আপনার পৃষ্ঠাটি আপলোড করার সময় এটি উপস্থিত বা আপলোড করা উচিত।
রোলওভার চিত্র প্রीलলোড করুন
এই বিকল্পটি ডিফল্টরূপে নির্বাচন করা হয় কারণ এটি রোলওভারটি আরও দ্রুত প্রদর্শিত হয়। রোলওভার ইমেজ প্রলুব্ধ করার দ্বারা, ওয়েব ব্রাউজারটি ক্যাশে সংরক্ষণ করবে যতক্ষণ না মাউসটি তার উপরে রোলস করে।
বিকল্প পাঠ্য
ভালো বিকল্প পাঠ্য আপনার ছবিগুলিকে আরও অ্যাক্সেসযোগ্য করে তোলে। কোনও ছবি যোগ করার সময় আপনাকে অবশ্যই কোন ধরণের বিকল্প পাঠ্যটি ব্যবহার করা উচিত।
ক্লিক করলে, URL এ যান
বেশিরভাগ লোকেরা একটি ছবিতে যখন কোন পৃষ্ঠাটি দেখতে পায় তখন ক্লিক করবে। তাই আপনি তাদের ক্লিকযোগ্য করার অভ্যাস থাকা উচিত। এই বিকল্পটি আপনাকে দর্শকদের ছবিতে ক্লিক করার জন্য পৃষ্ঠা বা URL নির্দিষ্ট করার অনুমতি দেয়। কিন্তু এই বিকল্পটি একটি রোলওভার তৈরির প্রয়োজন নেই।
আপনি যখন সমস্ত ক্ষেত্রগুলি সম্পন্ন করেছেন, তখন আপনার রোলওভার চিত্র তৈরি করতে ড্রিমওয়েভারের জন্য ওকে ক্লিক করুন।
পরবর্তী পৃষ্ঠাটি ড্রিমওয়েভার লিখেছেন যে স্ক্রিপ্টটি দেখায়।
06 এর 04
ড্রিমওয়েভার আপনার জন্য জাভাস্ক্রিপ্ট লিখেছেন
যদি আপনি পৃষ্ঠায় কোড-ভিউ খুলেন তবে আপনি দেখতে পাবেন যে ড্রিমওয়েভার আপনার HTML নথির
জাভাস্ক্রিপ্টের একটি ব্লক সন্নিবেশ করান। এই ব্লক 3 ফাংশন আপনি ইমেজ সোয়াপ আছে যখন তাদের উপর মাউস রোলস এবং preload ফাংশন আপনি এটি জন্য নির্বাচন করা প্রয়োজন আছে।ফাংশন MM_swapImgRestore ()
ফাংশন MM_findObj (n, d)
ফাংশন MM_swapImage ()
ফাংশন MM_preloadImages ()
06 এর 05
ড্রিমওয়েভার রোলওভারের জন্য এইচটিএমএল যোগ করে
আপনি যদি ড্রিমওয়েয়ারকে রোলওভার ইমেজগুলি লোড করতে চান, তাহলে আপনি আপনার ডকুমেন্টের মূল অংশে প্রিলোড স্ক্রিপ্টটি কল করার জন্য এইচটিএমএল কোডটি দেখতে পাবেন যাতে আপনার ছবিগুলি আরও দ্রুত লোড হয়।
লোড থাকলে = "MM_preloadImages ( 'shasta2.jpg')"
Dreamweaver আপনার ইমেজ জন্য সব কোড যোগ করে এবং এটি লিঙ্ক (যদি আপনি একটি URL অন্তর্ভুক্ত)। Rollover অংশ onmouseover এবং onmouseout গুণাবলী হিসাবে নোঙ্গর ট্যাগ যোগ করা হয়।
onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ( 'Image1', '', 'shasta1.jpg', 1)"
06 এর 06
রোলওভার পরীক্ষা আউট
সম্পূর্ণ কার্যকরী রোলওভার ইমেজ দেখুন এবং Shasta এর মনের উপর কি শিখতে।