بسم الله الرحمن الرحيم ..
بما إن هذا شي كنت أدور عليه من مدة .. حبيت أضيفه لهذا الصرح .. متأكد فيه ناس راح تدور عليه في المستقبل وهي قاعدة تصمم مواقعها ..
كلنا نعرف تأثير الـ 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; } وهذي الصورة اللي بنستخدمها.. وهي صورة وحدة ..
...
ايش يفيدنا هذا الموضوع
؟؟!
يفيدنا إن ما راح يصير بطء في تحميل الصورة لما تحط الماوس على الصورة الاولانية .. لانه يتم تحميل الصورة مرة واحدة ... ويقلل عدد اوامر الجلب للموقع .. لانك جلبت صورة وحدة بس مو ثنتين ..
المشكلة .. اذا ماحد مرر الماوس على الصورة .. رح تخسر شوية باندويث لانك حملت الجزء الثاني من الصورة اللي هو (الهوفر) وما تم استخدامه ..
أتمنى تكونوا استفدتوا .. انا منزل هذا الموضوع عشان اللي يدورون عليه .. مو موضوع عام يعني .. فـ عادي ما تكونو فهمتوا عالاكواد .. اللي قاعد يصمم ويشوفها بيفهم علي وشقاعد اقول
المواضيع المشابهه 
