بسم الله الرحمن الرحيم ، درس اليوم هو تطبيق لفكرة ، طالما تمنينا أن لو اتقنا تقنية Ajax للوصول إلى نتيجتها ، مع العلم ، أنني يمكنني استغلالها فقط بتطبيق صغير على أوامر css لتكون النتيجة جميلة و بفكرة جديدة و مريحة ، فائدة الدرس تتجلى في الصفحات ذات الصور الكثير ، كالمعارض ، أو أصحاب الدروس المصورة ، حيث أبين للزائر أنه عليه الانتظار لتحميل الصور ، وذلك بإضافة لمسة خفيفة للصور
مثال : Demo
لرؤية مثال على التطبيق اضغط هنا
الشرح :
طبعا الفكرة ، وهي جعل للصور الخاصة بفقرة معينة خلفية ، و التي هي عبارة عن ـأيقونة اجاكس متحركة ، و كلما تم تحميل الصورة كلما تم تغطية الخلفية
كود الصورة :
<img src="images/1.jpg" alt="description" />
كود عادي ، في خصائص تنسيقه css سأستغل الخلفية :
img { background: url('images/load.gif') no-repeat center center; }
بحيث load.gif هي صورة الاجاكس المتحركة
و موضعتها بـ center center لتكون متوسطة في مركز الصورة
هذا مثال لصورة عامة ، ولو طبقته هكذا ، سيتم تطبيقة حتى على صور تصميم موقعك ، وهذا لا أظنه جيد ، لذلك إما أن تعطيها class خاصا بها :
<img class="load" src="images/1.jpg" alt="description" />
ولكن حتى هذه ستكون مرهقة عند اضافة صور كثيرة في مقال ما ، بحيث ستكرر العملية لعدد الصور ، وهذا شيء مرهق ، بقي احل الأخير و الذي أفضله وهو أن يتم تحديد مكان الصورة بدقة جيدة مثال على ذلك :
<div id="main"> <p> <img src="images/1.jpg" alt="description" /> </p> </div>
سيتم تحديدها في ملف Css هكذا :
#main p img { background: url('images/load.gif') no-repeat center center; }
و هكذا لن يتم تطبيق الحركة إلا على الصور التي داخل الفقرات في محتوى الصفحة main ، فأكون اجتنبت جميع باقي الصور ، وكذلك طريقة الكلاس المرهقة
أتمنى أن تكون استفدت من الفكرة ، و تطبيقا موفقا في مشاريع مباركة
و السلام عليكم ورحمة الله
هذه التدوينة نُشرت
في الثلاثاء, 29 سبتمبر, 2009 عند 1:15 م و مصنفة تحت تصنيف css , xhtml.
يمكنك متابعة أي تعليقات عبر رابط RSS 2.0.
يمكنك ترك تعليق, أو تعقيب من مدونتك.
الوسوم :ajax, css, فكرة
-
لتكون على علم بآخر المواضيع و المقالات المضافة في fez-soft blog يمكنك الاشترك في :
- خلاصات المقالات
- خلاصات التعليقات
- متابعة الكاتب على twitter
- القائمة البريدية : بمجرد أن تضع بريدك الالكتروني و تشترك ، سنصلك قائمة بآخر المواضيع المضافة في المدونة تلقائيا إلى بريدك الالكتروني .
مرحبا ، اسمي محمد شاطر ، Mohammed chater , أعرف تحت مسمى Fez-Soft, طالب و مصمم و مطور تطبيقات ، من فاس المغرب . . يمكنك أن تتعرف علي اكثر من 
شكرا اخي محمد على هذا الدرس الجميل
أيضا الصور المدرجة رائعة قمت بحفظ أغلبها :)
فكرة لذيذه وبسيطة :) شكرا لك
خفيف وظريف :) لكن مفيد جدا في العديد من التطبيقات .
شكرا محمد . ولقد اضفتك لريدر الخاص بي ;)
السلام عليكم ورحمة الله وبركاته..
حركة ذكية وجميلة أخي محمد.. بارك الله فيك وجزاك عنا كل خير..
مني لك أرق تحية..
جيد جدآ
حركة رائعة
تسلم يمناك
افادني كثيرآ هذا الدرس
تحياتي لك …
رائع جداً اخي العزيز ومشكور
لكن هل نستطيع عمل هذه الطريقة , لكن من دون ظهور الصور أو انتظر التحميل حتى يكتمل التحميل تظهر الصور أو الموقع
ممكن تشرحلنا , بارك الله فيك : )
اهلا بكم جميعا .
smart designer : أبشر ، نشرحها في درس مستقل إن شاء الله
بارك الله فيك وجزاك كل خير…
في الانتظار استاذنا الغالي : )
السلام عليكم ..
الفكرة رائعه وتنفذيها اروع بـ CSS
كل يوم اكتشف ان CSS يمكنها فعل اشياء لم اكن اتوقعها
ولكن ما الضرر من استخدام الكلاس بدلا من Id دون حدوث مشاكل
وعمله هكذا
.load{background: url(‘images/load.gif’) no-repeat center center;}
فى هذه الحالة لن يتكرر الا للكلاس load ولن يسبب اى مشاكل ..
لو انا مخطأ ياريت تشرح هذه الجزئية لانى لم افهمها جيد
UnKnowN : المشكل ليس في الكلاس ، انما المشكل في الارهاق الذي سيببه لك كثرة اضافة كلاسات كثيرة في مقال يحتوي صور كثيرة ، نحن دائما نبحث عن الطرق السريعة ، وليست أي الطرق