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

الموضوع: تغيير الصورة عند مرور الماوس عليها ( أفضل طريقة ) !!

  1. #1

    تغيير الصورة عند مرور الماوس عليها ( أفضل طريقة ) !!



    بسم الله الرحمن الرحيم ..

    بما إن هذا شي كنت أدور عليه من مدة .. حبيت أضيفه لهذا الصرح .. متأكد فيه ناس راح تدور عليه في المستقبل وهي قاعدة تصمم مواقعها ..

    كلنا نعرف تأثير الـ a:hover ... عشان لما تمرر الماوس على اللنك يتغير اللون او الخط او اي شي ..

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

    كود HTML:
    <a id="button1" href="#"><span class="alt">Push!</span></a>
    والـ CSS المرافق هو ...

    كود HTML:
    a#button1 {
        display: block;
        width: 70px;
        height: 37px;
        background-image: url(/gifs/button_0.gif);
        margin: 0 auto;
    }
    a#button1:hover {
        background-image: url(/gifs/button_1.gif);
    }
    a .alt { display: none; }
    الصورة الاولى مثلا



    الصورة الثانية



    وبذلك لما الماوس تجي فوق الصورة تتغير الباكجراوند اللي هي الصورة اللي مختارينها .. وتتحمل صورة ثانية مكانها ..

    المشكلة هنا ..

    ان فيه بطئ واضح اذا كانت الصورة كبيرة ..

    ألحين بجيبلكم الطريقة اللي بنظري أحسن .. واللي ماشوف كثير يستعملونها ..

    كود HTML:
    <a id="button1a" href="#"><span class="alt">Push!</span></a>
    وكود الـ CSS المرافق بيكون ..

    كود HTML:
    a#button1a {
        display: block;
        width: 70px;
        height: 37px;
        background-image: url(/gifs/button_01.gif);
        background-position: 0 0;
        margin: 0 auto;
    }
    a#button1a:hover {
        background-position: 0 -37px;
    }
    a .alt { display: none; }
    وهذي الصورة اللي بنستخدمها.. وهي صورة وحدة ..



    ...

    ايش يفيدنا هذا الموضوع ؟؟!

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

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

    أتمنى تكونوا استفدتوا .. انا منزل هذا الموضوع عشان اللي يدورون عليه .. مو موضوع عام يعني .. فـ عادي ما تكونو فهمتوا عالاكواد .. اللي قاعد يصمم ويشوفها بيفهم علي وشقاعد اقول :nice:





    __________________
    ليث الخليلي .. موقعي القديم ( خلفيات شاشة - تحويل - الغاز - تفسير احلام - الشرس ).


  2. #2
    عضو نشيط جدا
    تاريخ التسجيل
    Apr 2010
    المشاركات
    436


    يعطيك العافية ..

    نعم أستخدم هذه الطريقة بجميع تصاميمي ..
    والمواقع الكبيرة تعمل نفس الطريقة .. مثل الفيس بوك
    http://static.ak.fbcdn.net/rsrc.php/...4igKx3JtVB.png





    __________________
    لا اله الا الله . . . محمّد رســول الله

  3. #3
    عضو نشيط جدا
    تاريخ التسجيل
    Jun 2008
    المشاركات
    517


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





    التعديل الأخير تم بواسطة الطآئر الجريح ; 04-04-2011 الساعة 03:35 PM
    __________________
    لا شيء يستحق التوقيع !

  4. #4


    نعم .. أشكر لكم مروركم .. وهناك طريقة لاختصار السطرين بسطر واحد بس كالتالي ..

    كود HTML:
    background: url(../images/graphics/homeBtnBG.gif) no-repeat 0px 0px;
    كود HTML:
    background: url(../images/graphics/homeBtnBG.gif) no-repeat 0px -42px;






    __________________
    ليث الخليلي .. موقعي القديم ( خلفيات شاشة - تحويل - الغاز - تفسير احلام - الشرس ).

  5. #5
    عضو نشيط
    تاريخ التسجيل
    Oct 2010
    المشاركات
    247


    أستعمل في بعض المرات هذه الطريقة على الايقونات التي اعرف انه لابد للزائر من وضع الماوس عليها

    اما بالنسبة للايقونات العادية التي لديها نسبة قليلة من الضغط فاستعمل الطريقة العادية وهي جلب صورة اخرى

    ولكن تبقى هذه الطريقة هي اقوى واحدة بحيث تتحمل مرة واحدة وبعدها تحس بسرعة تجاوب الموقع

    شكراً لك






  6. #6
    عضو نشيط
    تاريخ التسجيل
    Apr 2010
    المشاركات
    119


    ممتاز...
    بارك الله فيك










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

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

أضف موقعك هنا| اخبار السيارات | حراج | شقق للايجار في الكويت | بيوت للبيع في الكويت | دليل الكويت العقاري | مقروء | شركة كشف تسربات المياه | شركة عزل اسطح بالرياض | عزل فوم بالرياض| عزل اسطح بالرياض | كشف تسربات المياة بالرياض | شركة عزل اسطح بالرياض