35- صور CSS المضمنة (Image Sprites)

صورة CSS المضمنة هي مجموعة من الصور يتم وضعها في صورة واحدة.

يمكن أن تستغرق صفحة الويب التي تحتوي على العديد من الصور وقتًا طويلاً للتحميل وتنشئ طلبات متعددة إلى الخادم.

ستؤدي استخدام صور CSS المضمنة إلى تقليل عدد طلبات الخادم وتوفير عرض النطاق الترددي.

صور CSS المضمنة – مثال بسيط

بدلاً من استخدام ثلاث صور منفصلة، نستخدم هذه الصورة الواحدة (“img_navsprites.gif”):

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

يوضح المثال التالي رمز CSS الذي يحدد أي جزء من صورة “img_navsprites.gif” يجب عرضه:

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

شرح المثال: صور CSS المضمنة

<img id="home" src="img_trans.gif"> – يتم تعريف صورة شفافة صغيرة فقط لأن سمة src لا يمكن أن تكون فارغة. ستكون الصورة المعروضة هي صورة الخلفية التي نحددها في CSS.

width: 46px; height: 44px; – يحدد هذا الجزء من الصورة الذي نريد استخدامه.

background: url(img_navsprites.gif) 0 0; – يحدد هذا صورة الخلفية وموقعها (اليسار 0px، أعلى 0px).

هذه هي أسهل طريقة لاستخدام صور CSS المضمنة، والآن نريد توسيعها باستخدام الروابط وتأثيرات التمرير.

صور CSS المضمنة – إنشاء قائمة تنقل

نريد استخدام صورة sprite (“img_navsprites.gif”) لإنشاء قائمة تنقل.

سنستخدم قائمة 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;
  background: url('img_navsprites.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

شرح المثال: صور CSS المضمنة – إنشاء قائمة تنقل

نريد استخدام صورة sprite (“img_navsprites.gif”) لإنشاء قائمة تنقل.

1. ضبط العناصر الأساسية:

• #navlist {position:relative;}: يتم ضبط الخاصية position على relative للسماح بالتموضع المطلق (absolute positioning) للعناصر داخلها.

2. ضبط عناصر القائمة li:

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

3. ضبط ارتفاع وظهور العناصر:

• #navlist li, #navlist a {height:44px;display:block;}:
  • يتم ضبط ارتفاع جميع الصور على 44px.
  • يتم ضبط display على block لعرض عناصر القائمة كعناصر كتلة (block level elements).

4. ضبط موقع كل عنصر على حدة:

الآن، لنبدأ بتموضع وتصميم كل جزء محدد:

• #home {left:0px;width:46px;}:
  • يتم ضبط left على 0 لتثبيت العنصر تمامًا إلى اليسار.
  • يتم ضبط width على 46px لتحديد عرض الصورة.
• #home {background:url(img_navsprites.gif) 0 0;}:
  • يتم تحديد صورة الخلفية وموقعها (اليسار 0px، الأعلى 0px).
• (يتم اتباع نفس المنطق لعناصر أخرى في القائمة)
  • #prev {left:63px;width:43px;}: يتم تحديد موضع وابعاد عنصر “السابق”.
  • #prev {background:url('img_navsprites.gif') -47px 0;}: يتم تحديد موقع صورة الخلفية الخاصة بعنصر “السابق” داخل الصورة الكلية “img_navsprites.gif”. تحسب المسافة سلبا (-47px) بحيث تظهر الصورة المطلوبة (بناءً على عرض الصورة السابقة وخط فاصل).
  • (يتم اتباع نفس المنطق لعناصر أخرى في القائمة)

ملحوظة:

• يتم حساب المسافة بين العناصر بناءً على عرض كل صورة وخط فاصل افتراضي بين الصور.

صور CSS المضمنة – تأثيرات التمرير

الآن نريد إضافة تأثير تمرير إلى قائمة التنقل الخاصة بنا.

ملاحظة: يمكن استخدام المحدد :hover على جميع العناصر، وليس فقط على الروابط.

تحتوي صورتنا الجديدة (“img_navsprites_hover.gif”) على ثلاث صور للتنقل وثلاث صور لاستخدامها لتأثيرات التمرير:

نظرًا لأن هذه صورة واحدة وليست ستة ملفات منفصلة، فلن يكون هناك تأخير في التحميل عندما يحوم المستخدم فوق الصورة.

نضيف فقط ثلاثة أسطر من التعليمات البرمجية لإضافة تأثير التمرير:

#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;
}

شرح المثال: صور CSS المضمنة – تأثيرات التمرير

1. تحديد تأثيرات التمرير:

• #home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;}:
  • يتم استخدام المحدد #home a:hover لتطبيق التأثير على عنصر الرابط (#home) عند تحويم المستخدم فوقه.
  • يتم تحديد صورة الخلفية الجديدة “img_navsprites_hover.gif”.
  • يتم ضبط موضع الخلفية على 0 -45px.
    • القيمة 0 للمحور الأفقي (x) تعني عدم تحريك الصورة على يمين أو يسار.
    • القيمة -45px للمحور الرأسي (y) تعني تحريك الصورة لأعلى بمقدار 45px. وبما أن الصور الخاصة بالتحويم توجد أسفل الصور الأصلية في نفس الملف، فإن هذا التحريك لأعلى يعرض صورة التحويم المطلوبة.

2. ملاحظة عامة:

• يتم استخدام نفس قيمة موضع الخلفية (0 -45px) على جميع تأثيرات التمرير الثلاث لأن الصور الخاصة بالتحويم متباعدة بشكل متساوٍ في ملف الصورة الموحد “img_navsprites_hover.gif”.