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

[ليث الشرس]

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

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

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

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

<a id="button1" href="#"><span class="alt">Push!</span></a>

والـ CSS المرافق هو ...

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; }

الصورة الاولى مثلا



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



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

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

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

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

<a id="button1a" href="#"><span class="alt">Push!</span></a>

وكود الـ CSS المرافق بيكون ..

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:

[Ayman Jo]

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

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

[الطآئر الجريح]

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

[ليث الشرس]

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

background: url(../images/graphics/homeBtnBG.gif) no-repeat 0px 0px;

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

[A.Souali]

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

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

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

شكراً لك

[هاوي برمجة]

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