«
»

Replacement with CSS

Thursday 8 January 2009

اخفاء واظهار الصور والايقونات طريقة منتشرة في المواقع وهي نوع من انواع Effect التي يمكننا استخدامها ب css

في هذا الدرس البسيط سنتعرف على طريقة لاظهار الصور والتحكم فيها ب background-position، بعض المواقع مثل yahoo تلجأ لهذه الطريقة لتجميع كل الايقونات في صورة واحدة

مثال من delicious
مثال من yahoo
مثال من aol (كبر الصورة)

نتيجة الدرس (الصورة التي تظهر في الهدير)

السر في هذه الطريقة هو استعمال رابط a لاظهار الصورة او الايقونة .. كالتالي

<div id='header'>
     <p><a href="./"></a></p>
</div>

كود css سيتكون من جزئين, a وعند تمرير الفأرة a:hover كالتالي:

#header a{
    background: transparent url(logo.png) no-repeat 0 0;
    display: block;
    height: 60px;
    width: 150px;
}
 
#header a:hover {
	background-position: 0 -60px;
}

من الضروري تحديد عرض وارتفاع الصورة وقبل ذلك ان يكون الرابط block

وساضيف outline:none لاخفاء النقط التي تظهر بعد الضغط على الرابط في متصفح Firefox

#header a{
    outline: none;
}

هذه هي الفكرة ببساطة، ويمكن استعمالها في اغراض كثيرة اثناء العمل ب css و icons أو images

5 تعليقات

  1. cssbit says:
    January 8, 2009 at 11:19 pm

    عبد الهادي:
    نعم يتم التحكم في اظهار الصور ب position بقيم سالبة وموجبة في top و bottom
    العفو وارجو ان يكون الدرس مفيداً

  2. عبد الهادي says:
    January 8, 2009 at 11:10 pm

    السلام عليكم ورحمة الله وبركاته..
    أول ما راعى انتباهي هذا الأمر هو في موقع خدمة Skydrive:
    http://skydrive.live.com/
    حيث لاحظت استعمال الصورة ذاتها بأشكال مختلفة، وهذه نماذج للصور المستعلمة:
    http://msc.wlxrs.com/VJkcf-j9sAXrte5ku4F6Rg/images/smallicons_sprites.png
    http://img.wlxrs.com/$live.controls.images/ic/iciconmap24.png
    لكنني كنت أعتقد أن ذلك الأمر يطبق من خلال ا لتحكم في وسم positon و top إلخ، سيما أنني لاحظت أنهم يضعون قيما سالبة وأخرى موجبة يتحكمون بها في وضعية الصورة، ولم أنتبه لهذه الحركة التي شرحتها لنا مشكورا، فجزاك الله عنا كل خير..
    موفق ومني لك أرق تحية..

  3. حسن أحمد says:
    January 9, 2009 at 7:49 am

    السلام عليكم،
    حركة رائعة وجميلة عزيزي،
    كما أنها توفر عدد طلبات المتصفح للملفات الصغيرة من السيرفر،

    ملف واحد وكل الصور جاهزة عند زائر الموقع،

    موفق وإلى الأمام :)

  4. عمر الدليمي says:
    January 9, 2009 at 12:02 pm

    ليس فقط هذا الأمر
    أنظر يوتيوب جمع كل الصور في صورة واحدة بطريقة ذكية :).
    رأيتها قبل مدة وإستفدت منها كثير :).

    أمر رائع فعلاً ^^. (تخيل أن لغات الأنترنت ترسل بصورة Binary ،، هل سيتطور الأنترنت لهذا الحد؟ لا :) وهذا جمال أن لغات الأنترنت نصية :D )

  5. yosry sabry says:
    January 9, 2009 at 1:20 pm

    فعلا هذه من أفضل التكنيكات الهائلة في الـ css بالفعل .. ومفيد جدا للمنتديات والمواقع الكبيرة للتقليل من الـ requests الكثيرة لعناصر التصميم ..

    مثال آخر من موقع youtube
    http://s.ytimg.com/yt/img/master-vfl69326.gif

    شكرا لك يا عزيزي .. متألق دائما ..

التعليقات مغلقة.