عادةً ما تُستخدم الأسهم الرسومية على مواقع الويب لتنظيم التنقل. عند النقر فوق هذا المؤشر ، فإنك تنتقل إلى صفحة أخرى أو إلى قسم آخر من الصفحة الحالية. في بعض الأحيان يتم ربط بعض الإجراءات بها - إبراز محتوى حقل العلامة وتشغيل برنامج نصي JavaScript وما إلى ذلك للتأكيد على أن هذا السهم عنصر نشط ، استخدم تأثير "التمييز" ، أي التغييرات في المظهر عند تمرير الماوس.
ضروري
معرفة أساسية بلغات HTML و CSS
تعليمات
الخطوة 1
حدد آلية تنفيذ تمييز السهم الأفضل بالنسبة لك. هناك العديد منهم ، يتم إعطاء اثنين بسيطين في الخطوات اللاحقة لهذه التعليمات. كلاهما يستخدم فئة زائفة تحوم CSS. عندما يكون مؤشر الماوس فوق عنصر رسومي (السهم) ، يتم تطبيق النمط الموضح في هذه الفئة الزائفة عليه ، وبقية الوقت يكون هذا النمط غير نشط. لكلا الخيارين الموصوفين أدناه ، يمكنك استخدام نفس HTML رمز ، ولكن أوصاف نمط مختلفة. يمكن كتابة رمز السهم في مصدر الصفحة على النحو التالي: تحدد سمة المعرف معرف الارتباط (السهم أ) ، والذي من خلاله سيحدد المستعرض أي من أوصاف النمط التي يجب تطبيقها عليه.
الخطوة 2
سيتطلب منك الخيار الأول إعداد صورتي سهم - بإضاءة خلفية وبدونها. احفظها في ملفات بأسماء مثل arrON.
a # arrowA، a # arrowA: تمت الزيارة {
العرض محجوب؛
الارتفاع: 30 بكسل ؛
العرض: 100 بكسل ؛
الخلفية: url (arrOFF.gif) بدون تكرار ؛
الحدود: 0؛
}
a # arrowA: تحوم {
الخلفية: url (arrON.gif) بدون تكرار ؛
الحدود: 0؛
}
تحتوي الكتلة الأولى على أبعاد السهم (الارتفاع: 30 بكسل ؛ العرض: 100 بكسل ؛) - استبدلها بأبعاد صور الأسهم المعدة.
الخطوه 3
يسمح لك الخيار الثاني بالحصول على ملف صورة واحد فقط. تحتاج إلى وضع كلتا صور السهم فيه - مظللة وغير نشطة. يمكنك وضعها جنبًا إلى جنب ، يمكنك وضع أحدهما فوق الآخر. في نموذج الكود ، سنفترض أن السهم المميز يوضع تحت السهم غير النشط ، وأن الملف يسمى arr.
a # arrowA، a # arrowA: تمت الزيارة {
العرض محجوب؛
العرض: 100 بكسل ؛
الارتفاع: 30 بكسل ؛
الخلفية: url (arr.gif) لا تكرار ؛
الحدود: 0؛
}
a # arrowA: تحوم {
الخلفية: url (arr.gif) لا تكرار 31px ؛
الحدود: 0؛
}
لا تنس تغيير الحجم هنا أيضًا.
