• 0

كيف أستعمل إصدارات متعدد ﻷيقونة png داخل صفحة؟

في العديد من المواقع، ألاحظ وجود بعص الأيقونات التي تتغير عند حدوث حدث ما، كمرور الفأرة مثلا ...

أريد السؤال عن التقنية المستعملة هنا؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

كما تعلم تتوفر تقنية css3على إمكانية  تغيير الصور عند حدث معين مثلا  hover، حيث يوضع داخل كود التنسيق عند  هذا الحدث رابط الصورة الجديدة والتي تظهر بمجرد مرور زر الفأرة فوق الرابط أو العنصر المعني بالحدث.

كما يمكن تغيير موضع الصورة، حيث أن الصورة المستعملة كخلفية تتكون من صور عدة، وفي كل حدث يتغير موضع الصورة البارز.

مثال:

باعتبار الصور التالية:

sprite.png.6f78d4981d53487d2e0a98870f135

وهذا الكود المسؤول عن تغيير موضع position الصورة في الخلفية:

.flags-canada, .flags-mexico, .flags-usa {
  background-image: url('../images/flags.png');
  background-repeat: no-repeat;
}

.flags-canada {
  height: 128px;
  background-position: -5px -5px;
}

.flags-usa {
  height: 135px;
  background-position: -5px -143px;
}

.flags-mexico {
  height: 147px;
  background-position: -5px -288px;
}

 

تمّ تعديل بواسطة E.Nourddine

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن