العفاريت صورة
والعفريت الصورة هي عبارة عن مجموعة من الصور وضعت في صورة واحدة.
صفحة على شبكة الإنترنت مع العديد من الصور يمكن أن يستغرق وقتا طويلا لتحميل ويولد طلبات الخادم متعددة.
وذلك باستخدام العفاريت صورة تخفيض عدد طلبات الخادم وحفظ عرض النطاق الترددي.
العفاريت صورة - مثال بسيط
بدلا من استخدام ثلاث صور منفصلة، ونحن نستخدم هذه صورة واحدة ("img_navsprites.gif") :
مع CSS، ونحن يمكن أن تظهر فقط جزء من الصورة التي نحتاج إليها.
في المثال التالي يحدد CSS أي جزء من "img_navsprites.gif" صورة لإظهار:
مثال
#home
{
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
} انها محاولة لنفسك » وأوضح سبيل المثال:
-
<img id="home" src="img_trans.gif">- يحدد فقط صورة شفافة صغيرة لأن سمة src لا يمكن أن يكون فارغا. والصورة المعروضة تكون صورة خلفية نحدده نحن في CSS -
width: 46px; height: 44px;width: 46px; height: 44px;- يقوم بتحديد جزء من الصورة التي تريد استخدامها -
background: url(img_navsprites.gif) 0 0;- يحدد صورة خلفية وموقفها (من اليسار 0px، أعلى 0px)
هذا هو أسهل طريقة لاستخدام العفاريت صورة، ونحن الآن نريد لتوسيعه باستخدام وصلات وتحوم الآثار.
العفاريت صورة - إنشاء قائمة الإنتقال
نريد أن استخدام صورة شبح ("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;
}
انها محاولة لنفسك » وأوضح سبيل المثال:
- #navlist {position:relative;} وتحديد موقف لقريب للسماح المواقع المطلق داخله -
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} تم تعيين الهامش والحشو ل0، تتم إزالة نمط القائمة، وجميع عناصر القائمة والمطلق وضعه -
- #navlist li, #navlist a {height:44px;display:block;} - ذروة جميع الصور هي 44px
الآن نبدأ في وضع وأسلوب لكل جزء محدد:
- #home {left:0px;width:46px;} - المتمركزة على طول الطريق إلى اليسار، وعرض صورة غير 46px
- #home {background:url(img_navsprites.gif) 0 0;} - تعريف صورة الخلفية وموقفها (من اليسار 0px، أعلى 0px)
- #prev {left:63px;width:43px;} - المتمركزة 63px إلى اليمين (#home عرض 46px + بعض مساحة إضافية بين العناصر)، والعرض هو 43px.
- #prev {background:url('img_navsprites.gif') -47px 0;} - يقوم بتحديد 47px صورة خلفية إلى اليمين (#home عرض 46px + 1PX الخط الفاصل)
- #next {left:129px;width:43px;} - المتمركزة 129px إلى اليمين (بداية #prev هو 63px + عرض #prev 43px + مساحة إضافية)، والعرض هو 43px.
- #next {background:url('img_navsprites.gif') -91px 0;} - يقوم بتحديد 91px صورة خلفية إلى اليمين (#home عرض 46px + 1PX الخط الفاصل + عرض #prev 43px + 1PX الخط الفاصل)
العفاريت صورة - تحوم تأثير
الآن نريد أن إضافة تأثير تحوم الى قائمة الملاحة لدينا.
 | تلميح: :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;
} انها محاولة لنفسك » وأوضح سبيل المثال:
- #home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - لجميع الصور تحوم ثلاثة نحدد نفس الموقف الخلفية، فقط 45px إلى مزيد من الانخفاض