صورة الأيقونات

ان صورة الايقونات هي عبارة عن مجموعة أيقونات تم جمعها بصورة واحدة

ان الموقع الذي يحتوي على الأيقونات يمكن أن يأخذ وقت طويلاً في تحميل الموقع ويوّلد مجموعة أوامر مختلفة للسيرفر

باستخدام صورة الأيقونات يمكنك خفض طلبات السيرفر وخفظ الكثير من تبادل البيانات

---

صورة الأيقونات - مثال بسيط

عوضاً عن استخدام العديد من الأيقونات لفعل قوائم متعددة يمكن استخدام صورة واحدة تحتوي على الأيقونات المراد استخدامها وذلك بطريقة مذهلة باستخدام CSS

لاحظ هذه الصورة الواحدة تحتوي على العديد من الأيقونات ولكن نحن نريد استخدام أيقونة "الرئيسية" مثلاً أي صورة المنزل فقط حيث سنقوم بتحديد جزء من الصورة الكلية لذلك دعونا نقوم بذلك باستخدام CSS

مثال

img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}

شرح المثال :

• نستخدم <img class="home" src="img_trans.gif" /> مع استدعاء التصميم الخاص home وثم نضع أي اسم للصورة ضمن اللاحقة src لأنه لايمكن تركه فارغ , سيتم استخدام الصورة في التصميم كخلفية وبذلك سيتم استخدام الجزء الذي تم تحديده أي شكل البيت .


• نستخدم width:46px;height:44px; لتحديد العرض والارتفاع الذي نود استخدامه من الصورة الأصلية


• نستخدم background:url(img_navsprites.gif) 0 0; لتحديد صورة الخلفية وموضعها , أي على اليسار 0px والأعلى 0px

هذه أسهل طريقة لتحديد أيقونة معينة من خلال صورة تحتوي على العديد من الأيقونات المختلفة , ولكن الآن سنقوم بتعقد الكود قليلاً باستخدام خاصيات الرابط التشعبي مثل hover

---

إنشاء شريط قائمة من خلال صورة الأيقونات

الآن سنستخدم الصورة نفسها لإنشاء شريط قائمة وسنستخدم هنا قائمة HTML لأن القائمة ستكون روابط تشعبية وأيضاً محددة بصورة كخلفية

مثال

#navlist{
position:relative;
}
#navlist li{
margin:0;
padding:0;
list-style:none;
position:absolute;
top:0;
}
#navlist li, #navlist a{
height:44px;
display:block;
}
#home {
left:0px;
width:46px;
}
#home {
background:url('img_navsprites.gif') 0 0;
}
#prev {
left:63px;
width:43px;
}
#prev {
background:url('img_navsprites.gif') -47px 0;
}
#next {
left:129px;
width:43px;
}
#next {
background:url('img_navsprites.gif') -91px 0;
}

شرح المثال

• استخدمنا #navlist{position:relative;}لتحديد ترتيب متصل للسماح باستخدام ترتيب مطلق دخله


• استخدمنا #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} بتحديد الهوامش الداخلية والخارجية 0 , وشكل القائمة لاشيء أي إزالة علامات القائمة كما أن جميع القوائم ترتيبها متصل .


• استخدمنا #navlist li, #navlist أي الرابط التشعبي للتصميم الخاص #navlist li, #navlist تم تحديده , الارتفاع 44px وشكل الظهور / العرض على شكل كتل .

الآن سنقوم بشرح كل جزء بشكل مستقل

• استخدمنا #home{left:0px;width:46px;}(الصفحة الرئيسية) لتحديد الترتيب على اليسار وعرض الصورة هو 46px


• استخدمنا #home{background:url(img_navsprites.gif) 0 0;}لتحديد صورة الخلفية وهي الصورة التي تحتوي على جميع الأيقونات ومركزها 0 لليسار و 0 للأعلى


• استخدمنا #prev{left:63px;width:43px;}(الرجوع للخلف) لتحديد مكان الأيقونة في الصورة وهي 63px من اليمين (أي يمين أيقونة الرئيسيةمع اضافة مساحة اضافية بين العناصر) و العرض 43px


• استخدمنا #prev{background:url('img_navsprites.gif') -47px 0;}لتحديد الخلفية وهي صورة الأيقونات بالاضافة لتحديد (أيقونة الرجوع للخلف) ومكانها 47px لليمين (مكان الرئيسية 46 + 1 الخط الطولي الذي يفصل الأيقونات عن بعض)


• استخدمنا #next{left:129px;width:43px;} (أيقونة للأمام) لتحديد مكانها من الصورة الأصلية وهي 129px لليمين (تبدأ من أيقونة الخلف 63px + عرض أيقونة الخلف 43px + مساحة اضافية تختارها للفصل بين الأيقونات) وعرض أيقونة الأمام 43px


• استخدمنا #next{background:url('img_navsprites.gif') no-repeat -91px 0;}لتحديد صورة الخلفية وبتحديد المكان هو 91px لليمين (عرض أيقونة الرئيسية 46px + 1px الحد الفاصل + عرض أيقونة الرجوع 43px + 1px الحد الفاصل)

---

صورة الأيقونات - التأثيرات عند وضع الماوس

الآن سنقوم بوضع تأثيرات على القائمة مثل عند وضع الماوس على الأيقونة سيتغير اللون أو الشكل .

الصورة المعدلة هي كالتالي ("img_navsprites_hover.gif") وتحتوي على 3 عناصر للقائمة و 3 عناصر سيتم استخدامهم عند وضع الماوس على الأيقونة

لن يحدث مشاكل بتحميل الصفحة أو السيرفر لأنها صورة واحدة وليست 6 صور مستقلة عند وضع الماوس على عنصر القائمة .

لإضافة تأثيرات عند وضع الماوس على الأيقونة نحتاج الى اضافة 3 أكواد فقط

مثال

#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}

شرح المثال :

• يمكننا استخدام خاصية a:hover لأننا لدينا عناصر قائمة تحتوي على روابط


• استخدمنا #home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;}لتحديد الترتيب للأيقونات الثلاثة التي نود استخدامها وبنفس صورة الخلفية الى الأسفل بشكل أكبر 45px

---