مواقع مفضّلة: وصفات طبخ كوكتيل

النتائج 1 إلى 3 من 3

الموضوع: الدرس العشرون من دورة css - إستخدام أكثر من صورة في صورة واحدة - Image Sprites

  1. #1
    الصورة الرمزية bringy
    تاريخ التسجيل : Dec 2011
    رقم العضوية : 30217
    الاقامة : مصر
    الجنس : شركة اخرى
    الجنسية : 512 Kbps
    المشاركات : 3,359
    My SMS : D-LINK G604T
    انا دلوقتى نايــم
    معدل تقييم المستوى : 184
    Array

    افتراضي الدرس العشرون من دورة css - إستخدام أكثر من صورة في صورة واحدة - Image Sprites



    إستخدام أكثر من صورة في صورة واحدة - Image Sprites

    تمكنك css من إستخدام أكثر من صورة في صورة واحدة وذلك للتقليل من مدة تحميل الصفحة.
    فبهذه الطريقة يتم تحميل الصورة مرة واحدة و بالتالى يتم تقليل الطلبات المرسلة إلى السيرفر .

    فمثلا إذا كان لديك صورة كالصورة التالية تسمى pic.gif:


    [IMG]http://www.enjaztech.com/up/i/00010/flb98l5sf*08.gif[/IMG]

    وتريد إستخدام كل كلمة في هذه الصورة بشكل فردى
    فبدلا من تقطيع الصورة إلى ثلاث صور يمكنك إستخدامها كاملة ثم إستدعاء أى جزء من الصورة في أى مكان بالصفحة .

    ولعمل ذلك قم بعمل التالي:

    - أولا إذهب لبرنامج الفوتوشوب ثم قم بإنشاء صورة جديدة بإرتفاع1px وعرض 1px وخلفية شفافة بهذا الشكل :



    وإعطها الإسم tr ثم قم بحفظها بإمتداد gif فى مجلد الموقع.

    الموضوع الأصلى من هنا: بوابة إنجاز التقنية | خاصة بـ DSL و التقنية و الشبكات http://www.enjaztech.com/vb/showthread.php?p=124143
    الموضوع الأصلى من هنا: بوابة إنجاز التقنية | خاصة بـ DSL و التقنية و الشبكات http://www.enjaztech.com/vb/showthread.php?p=124143
    - ثم قم بوضع الصورة الشفافة ثلاث مرات بالصفحة ثم إعطى كل منها class مختلف بهذا الشكل:
    كود:
    <image src="tr.gif" class="pic1" /> <image src="tr.gif" class="pic2" /> <image src="tr.gif" class="pic3" />

    - الآن من خلال css سنقوم بإستدعاء كل جزء من الصورة pic.gif ونقوم بجعله خلفية لكل صورة من الصور الشفافة بهذا الشكل :

    كود:
    .pic1 { width:140px; height:50px; background:url(pic.gif) 0 -115px; } .pic2 { width:140px; height:50px; background:url(pic.gif) 0 -58px; } .pic3 { width:140px; height:50px; background:url(pic.gif) 0 0px; }
    وهنا حددنا عرض وإرتفاع كل صورة من خلال الخصائص
    width , height
    ثم من خلال الخاصية
    background:url(pic.gif) 0 0
    حددنا الجزء الذى نريد عرضه من الصورة الكبيرة
    pic.gif

    والنتيجة النهائية ستظهر الصور بالمتصفح بهذا الشكل:




    ملاحظة : عملية تحديد الجزء المراد عرضه تكون بتحديد مدى إبتعاد الجانب الأيسر والجانب الأعلى للجزء الذى نريد عرضه عن الجانب الأيسر والجانب الأعلى للصورة الكبيرة pic.gif
    بهذا الشكل
    background:url(pic.gif) left top
    و القيم تكتب بالقيمة السالبة إذا كانت لا تساوى صفر.


    إنتهى الدرس ...

  2. #2
    الصورة الرمزية السيدمتولي
    تاريخ التسجيل : Mar 2012
    رقم العضوية : 30912
    الاقامة : مصر
    الجنس : شركة اخرى
    الجنسية : 8 Mbps
    المشاركات : 478
    هواياتى : الثقافة والرسم والتكنولوجيا
    My SMS : Linksys WAG54G
    انا دلوقتى نايــم
    معدل تقييم المستوى : 112
    Array

    افتراضي رد: الدرس العشرون من دورة css - إستخدام أكثر من صورة في صورة واحدة - Image Sprites

    جميييييييييييل وشغال
    إذا مات ابن آدم انقطع عمله إلا من ثلاث: صدقة جارية، أو علم ينتفع به، أو ولد صالح يدعوا له. صدق رسول الله

  3. #3
    الصورة الرمزية fmounirf
    تاريخ التسجيل : Jan 2013
    رقم العضوية : 33185
    الاقامة : المغرب

    افتراضي رد: الدرس العشرون من دورة css - إستخدام أكثر من صورة في صورة واحدة - Image Sprites

    شكرا لك،، هذا من افضل الدروس التي كنت احتاجها

المواضيع المتشابهه

  1. برنامج محرر الصور للبلاك بيري image editor 2.0.0
    بواسطة HERO في المنتدى منتدى برامج بلاك بيري
    مشاركات: 0
    آخر مشاركة: 06-10-2013, 05:45 PM
  2. [ Product ] : منتج مركز استضافة الصور VB Image Hosting للجيل الثالث
    بواسطة معتزجمال في المنتدى دعم منتديات vBulletin 3.8.X
    مشاركات: 0
    آخر مشاركة: 06-04-2013, 10:15 AM
  3. PDF Image Extraction Wizard 6.01 Pro لإستخراج الصور من ملفات الـ PDF
    بواسطة Topics في المنتدى المهمل و المكرر
    مشاركات: 1
    آخر مشاركة: 07-02-2012, 03:39 AM
  4. برنامج رائع VSO Image Resizer للتلاعب بأحجام الصور
    بواسطة walidmca في المنتدى منتدى البرامج والإنترنت Programs & Internet
    مشاركات: 1
    آخر مشاركة: 10-07-2010, 06:25 AM
  5. البرنامج الرائع R-Drive Image 4.5 Build 4508 لعمل صورة من تعريفات جهازك واسترجاعها وق
    بواسطة prnsas في المنتدى منتدى البرامج والإنترنت Programs & Internet
    مشاركات: 10
    آخر مشاركة: 02-21-2010, 12:47 PM

الكلمات الدلالية لهذا الموضوع

المفضلات

المفضلات

ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •