CSSالصور المقتطعة
- مفهوم الصور المقتطعة
- طريقة عرض جزء من الصورة
- طريقة تغيير الصورة المقتطعة عند تمرير الماوس
مفهوم الصور المقتطعة
في حال كان موقعك يتضمن العديد من الصور الصغيرة التي يتم استخدامها كأيقونات، يمكنك تجميع كل هذه الصورة في صورة واحدة كبيرة و من ثم تقطيعها بواسطة CSS لعرض الجزء الخاص بكل صورة.
فمثلاً الأيقونات التالية موضوعة كصور واحدة و لكننا سنقتطع منها كل أيقونة نحتاجها منها عند الحاجة.
معلومة تقنية
هذا النوع من الصور يسمى Image Sprites و هو مهم جداً لتحسين أداء الموقع لأنه يخفف الطلبات ( Requests ) التي يتم إرسالها إلى الخادم ( Server ) الذي عليه موقعك و بالتالي يقلل الضغط عنه لأنه بدلاً من أن يتم إرسال طلب إلى الخادم لتحميل كل صورة على حدا سيتم إرسال طلب واحد فقط.
طريقة عرض جزء من الصورة
بشكل عام، لعرض جزء من الصورة نقوم بوضع الصورة كخلفية، و من ثم نحدد طولها و عرضها و إحداثياتها بالنسبة للصورة الأساسية.
في المثال التالي قمنا باقتطاع صورة المنزل الموجودة في الصورة الأساسية و عرضها.
مثال
في المثال التالي قمنا باقتطاع كل الصور الموجودة في الصورة الأساسية و عرضها بجانب عناصر القائمة.
مثال
طريقة تغيير الصورة المقتطعة عند تمرير الماوس
في حال كنت تريد تغيير صورة الأيقونة المقتطعة من الصورة الأساسية عند تمرير الماوس بحيث يظهر أن الأيقونة نفسها حدث فيها تغيير ما، يمكنك تجهيز نسخة مطابقة من الأيقونات كما فعلنا. لاحظ أن الصورة نفسها أصبحت تحتوي على أيقونات متشابهة و لكن بدرجات ألوان مختلفة.
في المثال التالي جعلنا الأيقونات المقتطعة من الصورة الأساسية تتبدل عند تمرير الماوس فوقها بالأيقونات الغامقة الألوان.