علومي
Would you like to react to this message? Create an account in a few clicks or log in to continue.

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

Go down

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

Post by شجون Thu Sep 16, 2010 3:22 am

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

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


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

حلو

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

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

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

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

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

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


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

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

رمز Code:
.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;







---------------------------------


بالـ css طريقه صنع زر نشط يتغير عند مرور الماوس عليه بسهولة Zip
css_hover.zip (12.0 كيلوبايت, عدد مرات المشاهدة 1747 مرة)
}

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

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

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

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


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

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

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

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






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

## إنتهي ##
شجون
شجون

الجنس : Female

عدد المساهمات : 502
النقاط : 53396
التقييم : 26
تاريخ التسجيل : 2010-02-23

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum