بالـ css طريقه صنع زر نشط يتغير عند مرور الماوس عليه بسهولة

تاريخ التسجيل : 27/05/2009

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

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

وهو ازرار الـ Rollover وطرق تنفيذه يمكن ان تختلف وتتنوع وهى الأزرار التى
تكون عبارة عن صور تتغير عند مرور الماوس عليها الى نفس الصورة ولكن
بتأثير آخر

وفى العادة كنا نقوم بعمل تلك الأزرار ببرنامج الفرنت بيج عن طريق تبادل
الصور وموجودة ايضا نفس الطريقه في برنامج الدريم ويفر ـ فنضع صورة
Original وهى التى تظهر لاول مرة ثم نضع صورة أخري للـ Rollover وهى التى
سوف تظهر للزائر بمجرد بمرور الماوس على نفس الزر .

حلو

وكانت هذه الطريقه في أكثر الحالات تكون بطيئة جدا ولا تظهر بسلاسة بمجرد
وقوف مؤشر الفارة على الزر او الصورة ـ لانها كانت تعتمد على دوال لتغير
طريقه العرض او اسكربت ( مش عارف ) وتجد بعد الإنتهاء ان الكود الناتيج ضخم
جدا وبه الكثير من الأوامر التى لا تعرفها ..

تعال معى الان شاهد هذا المثال [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] وشوف الحلاوة والجمال لو نظرت الى كود الصفحه النظيف جدا وسرعه تغير الصورة
قارن بين ماشاهدته ولو قمت بعمل نفس الصفحه على الطريقه القديمة بأكثر من صورة للتبادل

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الصورة الأولى وهى الصورة التى تظهر في الوضع الطبيعى والثانيه عند التأشير ــ والتحكم فيه سوف يكون عن طريق أوامر css البسيطة .

والطريقه هى بعمل فئتين class لكل زر ، واحدة لكى تظهر بها الصورة الأساسيه
والثانيه هى التى تبدل بها الصورة الأخري التى تظهر عندك التأشير .

اضفت فئتين class فقط للتوضيح واحد بإسم home للزر المسمى الرئيسيه والأخر بإسم new_b وكررته على الباقي
الكود مفصلاً كالتالي :

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الكود:: .home {
background-image: url(../images/home.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
height: 37px;
width: 129px;
display: block;
float: right;
}
.home:hover {
background-image: url(../images/home.gif);
background-repeat: no-repeat;
background-position: 0px -37px;
}

home وهى الفئة الذى نحدد فيه ابعاد الصورة وطريقه عرضها ووضعها بالتصميم

background : مسار صورة الزر التى تحتوى على الحالاتين .
background-repeat : الصورة ثابته ولا تتكرر .
background-position : موضع الصورة ( افقي- راسي ).
height : أرتفاع الزر الحقيقي original ـ
width : عرض الزر الحقيقى .
display: block : حتى يتم تعريف هذا العنصر بشكل مستقل .
float : التجانب على اليمين او كما تحب ان يكون حسب التصميم.

home:hover وهو الذى من خلاله نتحكم بظهور الصورة الجديدة عند التأشير
ونفس الصورة وضعناها مرة أخري وتم حذف كل من الطول والعرض والتجانب وتعريف العنصر لانهم معرفين من قبل

والجديد هو موضع الصورة وفيه ارتفعنا بمقدار 37 ( بالسالب ) وهو ارتفاع
الزر الحقيقى لان الصورة التى وضعناها تحتوى على الزرين بإرتفاع 74 .

وتعرّف هذه الفئات بداخل وسوم الروابط a مباشرة
كما بالشكل التالي ..

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

كما أنك يمكن أن تصنع نفس تأثير الـ hover على ازار ( موضوع جديد ـ إضافة
رد ) ـ وعلى وصلات النافبار ايضا طالما فهمت فكرة التعديل وإضافة class
جديد على روابط الأزرار .

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

## إنتهي ##
المثال موجود بالمرفق للتمرين عليه .

وتقبلوا جميعاً التحيه ،،

المرفقات

css_hover.zip: الحقوق محفوظة لشبكة زوي العربية; لا تتوفر على صلاحيات كافية لتحميل هذه المرفقات.; (13 Ko) عدد مرات التنزيل 0

توقيع العضو