عادةً ما يتم تنظيم الإضاءة الخلفية للأزرار في صفحات الويب باستخدام صورتين. عند تحريك مؤشر الماوس فوق العنصر المقابل في المستند (رابط أو زر) ، يتم إنشاء حدث يطالب المتصفح ، وفقًا للإرشادات المكتوبة بلغة CSS ، بتغيير صورة إلى أخرى. عند تحريك مؤشر الماوس بعيدًا عن الزر ، يحدث الاستبدال العكسي.
ضروري
معرفة أساسية بلغات HTML و CSS
تعليمات
الخطوة 1
هناك عدة خيارات لتنفيذ آلية التظليل هذه. لأي منها ، يمكنك استخدام نفس كود HTML ، وتغيير وصف النمط المقابل فقط. قد يبدو رمز HTML الخاص بالزر كما يلي: نص على الزر هنا معرف عنصر الصفحة هذا (id = "btnA") الذي سيتم إرفاق وصف النمط به.
الخطوة 2
لتنفيذ أحد الخيارات ، تحتاج إلى إعداد صورتين ، تعرض إحداهما الزر في حالة غير نشطة ، والثانية بإضاءة خلفية. سيتم استخدامها كصورة خلفية الارتباط. قد تبدو تعليمات CSS لهذا الزر كما يلي:
a # btnA، a # btnA: تمت الزيارة {
العرض محجوب؛
العرض: 50 بكسل ؛
الارتفاع: 20 بكسل ؛
الخلفية: url (btnA.gif) بدون تكرار ؛
الحدود: 0؛
}
a # btnA: تحوم {
الخلفية: url (btnA_hover.gif) لا تكرار ؛
الحدود: 0؛
}
هنا ، في الكتلة الأولى ، يشار إلى أبعاد الصورة التي تصور الزر (العرض: 50 بكسل ؛ الارتفاع: 20 بكسل ؛). تحتاج إلى استبدالها بأبعاد صورتك. يجب تغيير أسماء ملفات الصور بنفس الطريقة: btnA.
الخطوه 3
أحد البدائل هو وضع كلتا الصورتين في صورة واحدة. يمكن أن تكون واحدة فوق الأخرى ، أو يمكن أن تكون بجانب بعضها البعض. سيتم استخدامه أيضًا كخلفية للارتباط. نظرًا لأن أحجام الأزرار محددة في وصف نمط الزر ، فلن يكون أي شيء لا يتناسب معها مرئيًا. في هذه الحالة ، يجب أن تقوم الإرشادات الواردة في وصف CSS ، عند تحريك مؤشر الماوس ، بالتمرير في صورة الخلفية بحيث تقع المنطقة التي تحتوي على صورة الزر المميز في الإطار. بالنسبة لهذا الخيار ، يجب تغيير الرمز من الخطوة السابقة على النحو التالي:
a # btnA، a # btnA: تمت الزيارة {
العرض محجوب؛
العرض: 50 بكسل ؛
الارتفاع: 20 بكسل ؛
الخلفية: url (btnA.gif) بدون تكرار ؛
الحدود: 0؛
}
a # btnA: تحوم {
الخلفية: url (btnA.gif) بدون تكرار 21 بكسل ؛
الحدود: 0؛
}
يفترض هذا أنك وضعت الصور واحدة فوق الأخرى (مميزة في الأسفل) وحفظتها في ملف يسمى btnA.gif. ارتفاع الأزرار 20 بكسل ، والعرض 50 بكسل - تحتاج إلى استبدال هذه القيم بقيمك الخاصة.
