CSS image sprites

-

في هذه الخاصية يتم تقسيم صورة واحدة الى مجموعة من الصور، فا بدل ما يتم تحميل مجموعة من الصورة يتم تحميل صورة واحدة الأمر الذي قد يقلل من وقت التحميل، أيضا استخدام image sprites بقلل من طلبت server لتحميل الصورة الامر الي اكيد بقلل bandwidth في المواقع.

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

الصورة الي بنتعامل معاها 


تمام الفكرة ان بنقسم الصورة الى أجزاء ، وفي مثالنا هنا المطلوب عرض ايقونات لمواقع التواصل، وبعدها نربط كل جزء مع الرابط الخاص فيه

نبدأ بعمل صفحة HTML باسم imagesprites وبعدها نضيف الكود التالي فيها :


<!DOCTYPE html>
<html>
<head>
<style>
.meta {
  width: 105px;
  height: 110px;
  background: url(Soical.jpg) 0 0;
}
.meta:hover {
    width: 105px;
  height: 110px;
  background: url(Soical.jpg) 0 -108px;
  cursor: pointer;
}
.Twitter {
    width: 105px;
  height: 110px;
  background: url(Soical.jpg) 107px 0;
}
.Twitter:hover {
    width: 105px;
  height: 110px;
  background: url(Soical.jpg) 107px -108px;
  cursor: pointer;
}
</style>
</head>
<body>
<img class="meta"  >
<img class="Twitter" >
</body>
</html>
شغل الصفحة وشوف النتيجة، في البداية بكون شكل الصفحة:

حاول تحرك mouse فوق الصورة بتكون النتيجة:
طيب نفهم شو عملنا.
قسمنا الصورة الى 4 اقسام ، اول قسمين لأيقونات meta و Twitter بلون خافت. وبعدها بنعرض القسم الثاني باللون الغامق عند تحريك Mouse . 

تمام نرجع للكود ونفهم شو عملنا . 
أولا استخدمنا الكود : 

.meta {
  width: 105px;
  height: 110px;
  background: url(Soical.jpg) 0 0;
}
طبقنا هذا class على الصورة الأولى: 
<img class="meta"  >

في هذا الكود استخدمنا الطول والارتفاع للحصول على الجزء الأول من الصورة الكاملة وهو ايقونة meta (اكيد لازم يكون الطول والعرض مناسب لحجم الايقونة في الصورة الكاملة)
بعد هيك  استخدمن الكود :
  background: url(Soical.jpg) 0 0;

هذا الكود بعمل على تحديد الخلفية لهذه الصورة (الايقونة)، لاحظ ان الها 3 parameters
  • هو مسار الصورة الكاملة url(Soical.jpg)
  • نقطة بداية عرض خلفية الصورة من جهة اليسار (هنا القيمة 0) يعني هذه الايقونة بتبدأ بعرض الصورة الكاملة من المكان صفر من جهة اليسار
  • نقطة بداية عرض خلفية الصورة من جهة الاعلى (هنا القيمة 0) يعني هذه الايقونة بتبدأ بعرض الصورة الكاملة من المكان صفر من جهة الأعلى
بتكون النتيجة عرض ايقونة Facebook هنا 

بالنسبة للصورة الثانية
 
<img class="Twitter" >
طبقنا الكود :
.Twitter {
    width: 105px;
  height: 110px;
  background: url(Soical.jpg) 107px 0;
}
لاحظ الطول والعرض ثابت ما تغيير (حسب طول وعرض الأيقونة في الصورة الأصل). لكن غيرنا في خلفية الصورة استخدمنا الكود:

background: url(Soical.jpg) 107px 0;

هذا الكود بعمل على تحديد الخلفية لهذه الصورة (الايقونة)، لاحظ ان الها 3 parameters

  • هو مسار الصورة الكاملة url(Soical.jpg)
  • نقطة بداية عرض خلفية الصورة من جهة اليسار (هنا القيمة 107) يعني هذه الايقونة بتبدأ بعرض الصورة الكاملة من المكان 107 من جهة اليسار وهي مكان بداية الصورة الثانية Twitter
  • نقطة بداية عرض خلفية الصورة من جهة الاعلى (هنا القيمة 0) يعني هذه الايقونة بتبدأ بعرض الصورة الكاملة من المكان صفر من جهة الأعلى (ما غيرن القيمة لان ما حاجة الان فقط الحاجة تحريك نقطة البداية)
لحد الان هذه الكود  بتكون النتيجة: 


الجزء الثاني هو الجزء الخاص بالتغيير الحاصل عند تحريك mouse فوق الصورة.
ايقونة Facebook
طبقن الكود التالي (استخدمنا Pseudo-classes هنا)
.meta:hover {
    width: 105px;
  height: 110px;
  background: url(Soical.jpg) 0 -108px;
  cursor: pointer;
}
لاحظ الطول والعرض ثابت ما تغيير (حسب طول وعرض الأيقونة في الصورة الأصل). لكن غيرنا في خلفية الصورة استخدمنا الكود:
background: url(Soical.jpg) 0 -108px;

هذا الكود بعمل على تحديد الخلفية لهذه الصورة (الايقونة)، لاحظ ان الها 3 parameters
  • هو مسار الصورة الكاملة url(Soical.jpg)
  • نقطة بداية عرض خلفية الصورة من جهة اليسار (هنا القيمة 0) يعني هذه الايقونة بتبدأ بعرض الصورة الكاملة من المكان 0 من جهة اليسار (نفس مكان الأيقونة باللون الخافت)
  • نقطة بداية عرض خلفية الصورة من جهة الاعلى (هنا القيمة 108-) يعني هذه الايقونة بتبدأ بعرض الصورة الكاملة من المكان (-108) من جهة الأعلى (نقطة بداية ايقونة Facebook الملونة)
أخيرا استخدمنا الامر 

  cursor: pointer;
الهدف تغيير شكل مؤشر mouse الى يد للدلالة على ان هذه الأيقونة عبارة عن رابط

ايقونة Twitter
طبقن الكود التالي (استخدمنا Pseudo-classes هنا)
.Twitter:hover {
    width: 105px;
  height: 110px;
  background: url(Soical.jpg) 107px -108px;
  cursor: pointer;
}
لاحظ الطول والعرض ثابت ما تغيير (حسب طول وعرض الأيقونة في الصورة الأصل). لكن غيرنا في خلفية الصورة استخدمنا الكود:
  background: url(Soical.jpg) 107px -108px;

هذا الكود بعمل على تحديد الخلفية لهذه الصورة (الايقونة)، لاحظ ان الها 3 parameters
  • هو مسار الصورة الكاملة url(Soical.jpg)
  • نقطة بداية عرض خلفية الصورة من جهة اليسار (هنا القيمة 107) يعني هذه الايقونة بتبدأ بعرض الصورة الكاملة من المكان 107 من جهة اليسار (وهي مكان بداية الصورة الثانية Twitter)
  • نقطة بداية عرض خلفية الصورة من جهة الاعلى (هنا القيمة 108-) يعني هذه الايقونة بتبدأ بعرض الصورة الكاملة من المكان (-108) من جهة الأعلى (نقطة بداية ايقونة Twitter الملونة)
يمكن تطبيق نفس هذا الكلام على الروابط مع تحديد الروابط <a href>  المطلوبة 

طبق الكود التالي في صفحة HTML وشوف النتيجة :

<!DOCTYPE html>
<html>
<head>
<style>
.meta {
  width: 105px;
  height: 110px;
  background: url(Soical.jpg) 0 0;
  float: left;
}
.meta:hover {
    width: 105px;
  height: 110px;
  background: url(Soical.jpg) 0 -108px;
  cursor: pointer;
}
.Twitter {
    width: 105px;
  height: 110px;
  background: url(Soical.jpg) 107px 0;
  float: left;
}
.Twitter:hover {
    width: 105px;
  height: 110px;
  background: url(Soical.jpg) 107px -108px;
  cursor: pointer;
}
</style>
</head>
<body>
<a href="http://www.facebook.com" ><div class="meta"></div></a>
<a href="http://www.Twitter.com" ><div class="Twitter"></div></a>
</body>
</html>