ওয়েব পৃষ্ঠাগুলিতে বোতামগুলির ব্যাকলাইটিং সাধারণত দুটি চিত্র ব্যবহার করে সংগঠিত হয়। আপনি যখন নথির সংশ্লিষ্ট উপাদান (লিঙ্ক বা বোতাম) এর উপর মাউস কার্সার নিয়ে যান, তখন একটি ইভেন্ট উত্পন্ন হয়, যা সিএসএস ভাষায় লিখিত নির্দেশাবলী অনুসারে ব্রাউজারকে একটি চিত্র অন্যটিতে পরিবর্তন করতে অনুরোধ করে। মাউস কার্সারটি বোতাম থেকে সরে গেলে বিপরীত প্রতিস্থাপন ঘটে।
প্রয়োজনীয়
এইচটিএমএল এবং সিএসএস ভাষার প্রাথমিক জ্ঞান
নির্দেশনা
ধাপ 1
এই জাতীয় হাইলাইটিং মেকানিজম বাস্তবায়নের জন্য বেশ কয়েকটি বিকল্প রয়েছে। তাদের যে কোনওটির জন্য, আপনি কেবল একই শৈলীর বর্ণনা পরিবর্তন করে একই HTML কোড ব্যবহার করতে পারেন। বোতামটির এইচটিএমএল কোডটি দেখতে এইরকম হতে পারে: বোতামের পাঠ্য এই পৃষ্ঠার উপাদানটির পরিচয়কারী (id = "বিটিএনএ") যা শৈলীর বিবরণ সংযুক্ত করা হবে।
ধাপ ২
বিকল্পগুলির মধ্যে একটি বাস্তবায়ন করতে, আপনাকে দুটি ছবি প্রস্তুত করতে হবে, যার মধ্যে একটি নিষ্ক্রিয় অবস্থায় বোতামটি দেখায় এবং দ্বিতীয়টি ব্যাকলাইট সহ with এগুলি লিঙ্কটির ব্যাকগ্রাউন্ড চিত্র হিসাবে ব্যবহৃত হবে। এই বোতামটির জন্য সিএসএসের নির্দেশাবলী এ জাতীয় দেখতে পাবেন:
একটি # বিটিএনএ, একটি # বিটিএনএ: দেখা {
প্রদর্শন ব্লক;
প্রস্থ: 50px;
উচ্চতা: 20px;
পটভূমি: url (btnA.gif) নো-রিপিট;
সীমানা: 0;
}
একটি # বিটিএনএ: হোভার {
পটভূমি: url (btnA_hover.gif) নো-রিপিট;
সীমানা: 0;
}
এখানে, প্রথম ব্লকে, বোতামটি চিত্রিত করার চিত্রগুলির মাত্রাগুলি নির্দেশিত হয়েছে (প্রস্থ: 50px; উচ্চতা: 20px;)। আপনার এগুলি আপনার চিত্রের মাত্রা দিয়ে প্রতিস্থাপন করতে হবে। চিত্র ফাইলগুলির নামও একইভাবে পরিবর্তন করা উচিত: বিটিএনএএফআইফ একটি ব্যাকলাইট ব্যতীত একটি বোতাম, বিটিএনএ_হোভার.
ধাপ 3
একটি বিকল্প হ'ল উভয় চিত্রকে একটি ছবিতে রাখা। এটি একে অপরের উপরে হতে পারে, বা এটি একে অপরের পাশে হতে পারে। এটি লিঙ্কটির জন্য একটি পটভূমি হিসাবে ব্যবহৃত হবে। যেহেতু বোতামের আকারগুলি বোতামের শৈলীর বর্ণনায় নির্দিষ্ট করা আছে, তাই যেগুলির মধ্যে এটি খাপ খায় না সেগুলি দৃশ্যমান হবে না। এই ক্ষেত্রে, সিএসএস বিবরণে রাখা নির্দেশাবলী, মাউস কার্সারকে ঘোরা করার সময়, পটভূমি চিত্রটি স্ক্রোল করা উচিত যাতে হাইলাইটেড বোতামের চিত্রের ক্ষেত্রটি ফ্রেমের মধ্যে পড়ে। এই বিকল্পের জন্য, পূর্ববর্তী পদক্ষেপের কোডটি নিম্নরূপে পরিবর্তন করতে হবে:
একটি # বিটিএনএ, একটি # বিটিএনএ: দেখা {
প্রদর্শন ব্লক;
প্রস্থ: 50px;
উচ্চতা: 20px;
পটভূমি: url (btnA.gif) নো-রিপিট;
সীমানা: 0;
}
একটি # বিটিএনএ: হোভার {
পটভূমি: url (btnA.gif) নো-রিপিট 21px;
সীমানা: 0;
}
এটি ধরে নেওয়া হয় যে আপনি চিত্রগুলি একে অপরের উপরে রেখেছেন (নীচে হাইলাইট করেছেন) এবং btnA.gif"
