بالـ css طريقه صنع زر نشط يتغير عند مرور الماوس عليه بسهولة
Page 1 of 1
بالـ css طريقه صنع زر نشط يتغير عند مرور الماوس عليه بسهولة
ازرار الـ Rollover وطرق تنفيذه يمكن ان تختلف وتتنوع وهى الأزرار التىتكون عبارة عن صور تتغير عند مرور الماوس عليها الى نفس الصورة ولكنبتأثير آخر
بالـ css طريقه صنع زر نشط يتغير عند مرور الماوس عليه بسهولة
وفى العادة كنا نقوم بعمل تلك الأزرار ببرنامج الفرنت بيج عن طريق تبادلالصور وموجودة ايضا نفس الطريقه في برنامج الدريم ويفر ـ فنضع صورةOriginal وهى التى تظهر لاول مرة ثم نضع صورة أخري للـ Rollover وهى التىسوف تظهر للزائر بمجرد بمرور الماوس على نفس الزر .
حلو
وكانت هذه الطريقه في أكثر الحالات تكون بطيئة جدا ولا تظهر بسلاسة بمجردوقوف مؤشر الفارة على الزر او الصورة ـ لانها كانت تعتمد على دوال لتغيرطريقه العرض او اسكربت ( مش عارف ) وتجد بعد الإنتهاء ان الكود الناتيجضخم جدا وبه الكثير من الأوامر التى لا تعرفها ..
تعال معى الان شاهد هذا المثال هنـــا وشوف الحلاوة والجمال لو نظرت الى كود الصفحه النظيف جدا وسرعه تغير الصورة
قارن بين ماشاهدته ولو قمت بعمل نفس الصفحه على الطريقه القديمة بأكثر من صورة للتبادل
المهم وحتى لا أطيل ـ من الان أنسي كل هالطرق القديمه وتعال إذا كنت تريدان تصمم زر متحرك عند التأشير عليه سواء كان فى الهيدر او الفوتر او كانأحد أزرار المنتدى قطعه بهذا الشكل في صورة واحده فقط .
الصورة الأولى وهى الصورة التى تظهر في الوضع الطبيعى والثانيه عند التأشير ــ والتحكم فيه سوف يكون عن طريق أوامر css البسيطة .
والطريقه هى بعمل فئتين class لكل زر ، واحدة لكى تظهر بها الصورةالأساسيه والثانيه هى التى تبدل بها الصورة الأخري التى تظهر عندك التأشير.
اضفت فئتين class فقط للتوضيح واحد بإسم home للزر المسمى الرئيسيه والأخر بإسم new_b وكررته على الباقي
الكود مفصلاً كالتالي :
رمز 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_hover.zip (12.0 كيلوبايت, عدد مرات المشاهدة 1747 مرة)
}
home وهى الفئة الذى نحدد فيه ابعاد الصورة وطريقه عرضها ووضعها بالتصميم
background : مسار صورة الزر التى تحتوى على الحالاتين .
background-repeat : الصورة ثابته ولا تتكرر .
background-position : موضع الصورة ( افقي- راسي ).
height : أرتفاع الزر الحقيقي original ـ
width : عرض الزر الحقيقى .
display: block : حتى يتم تعريف هذا العنصر بشكل مستقل .
float : التجانب على اليمين او كما تحب ان يكون حسب التصميم.
home:hover وهو الذى من خلاله نتحكم بظهور الصورة الجديدة عند التأشير
ونفس الصورة وضعناها مرة أخري وتم حذف كل من الطول والعرض والتجانب وتعريف العنصر لانهم معرفين من قبل
والجديد هو موضع الصورة وفيه ارتفعنا بمقدار 37 ( بالسالب ) وهو ارتفاعالزر الحقيقى لان الصورة التى وضعناها تحتوى على الزرين بإرتفاع 74 .
وتعرّف هذه الفئات بداخل وسوم الروابط a مباشرة
كما بالشكل التالي ..
كما أنك يمكن أن تصنع نفس تأثير الـ hover على ازار ( موضوع جديد ـ إضافةرد ) ـ وعلى وصلات النافبار ايضا طالما فهمت فكرة التعديل وإضافة classجديد على روابط الأزرار .
وعلى فكرة الدرس كان يمكن ان يكون بقسم تطوير المواقع ولكن احببت ان يكونهناك للإستفادة منه أكثر بتصميم الإستايلات ولمزيداً من الإحترافية .
بالـ css طريقه صنع زر نشط يتغير عند مرور الماوس عليه بسهولة
## إنتهي ##
بالـ css طريقه صنع زر نشط يتغير عند مرور الماوس عليه بسهولة
وفى العادة كنا نقوم بعمل تلك الأزرار ببرنامج الفرنت بيج عن طريق تبادلالصور وموجودة ايضا نفس الطريقه في برنامج الدريم ويفر ـ فنضع صورةOriginal وهى التى تظهر لاول مرة ثم نضع صورة أخري للـ Rollover وهى التىسوف تظهر للزائر بمجرد بمرور الماوس على نفس الزر .
حلو
وكانت هذه الطريقه في أكثر الحالات تكون بطيئة جدا ولا تظهر بسلاسة بمجردوقوف مؤشر الفارة على الزر او الصورة ـ لانها كانت تعتمد على دوال لتغيرطريقه العرض او اسكربت ( مش عارف ) وتجد بعد الإنتهاء ان الكود الناتيجضخم جدا وبه الكثير من الأوامر التى لا تعرفها ..
تعال معى الان شاهد هذا المثال هنـــا وشوف الحلاوة والجمال لو نظرت الى كود الصفحه النظيف جدا وسرعه تغير الصورة
قارن بين ماشاهدته ولو قمت بعمل نفس الصفحه على الطريقه القديمة بأكثر من صورة للتبادل
المهم وحتى لا أطيل ـ من الان أنسي كل هالطرق القديمه وتعال إذا كنت تريدان تصمم زر متحرك عند التأشير عليه سواء كان فى الهيدر او الفوتر او كانأحد أزرار المنتدى قطعه بهذا الشكل في صورة واحده فقط .
الصورة الأولى وهى الصورة التى تظهر في الوضع الطبيعى والثانيه عند التأشير ــ والتحكم فيه سوف يكون عن طريق أوامر css البسيطة .
والطريقه هى بعمل فئتين class لكل زر ، واحدة لكى تظهر بها الصورةالأساسيه والثانيه هى التى تبدل بها الصورة الأخري التى تظهر عندك التأشير.
اضفت فئتين class فقط للتوضيح واحد بإسم home للزر المسمى الرئيسيه والأخر بإسم new_b وكررته على الباقي
الكود مفصلاً كالتالي :
رمز 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_hover.zip (12.0 كيلوبايت, عدد مرات المشاهدة 1747 مرة)
}
home وهى الفئة الذى نحدد فيه ابعاد الصورة وطريقه عرضها ووضعها بالتصميم
background : مسار صورة الزر التى تحتوى على الحالاتين .
background-repeat : الصورة ثابته ولا تتكرر .
background-position : موضع الصورة ( افقي- راسي ).
height : أرتفاع الزر الحقيقي original ـ
width : عرض الزر الحقيقى .
display: block : حتى يتم تعريف هذا العنصر بشكل مستقل .
float : التجانب على اليمين او كما تحب ان يكون حسب التصميم.
home:hover وهو الذى من خلاله نتحكم بظهور الصورة الجديدة عند التأشير
ونفس الصورة وضعناها مرة أخري وتم حذف كل من الطول والعرض والتجانب وتعريف العنصر لانهم معرفين من قبل
والجديد هو موضع الصورة وفيه ارتفعنا بمقدار 37 ( بالسالب ) وهو ارتفاعالزر الحقيقى لان الصورة التى وضعناها تحتوى على الزرين بإرتفاع 74 .
وتعرّف هذه الفئات بداخل وسوم الروابط a مباشرة
كما بالشكل التالي ..
كما أنك يمكن أن تصنع نفس تأثير الـ hover على ازار ( موضوع جديد ـ إضافةرد ) ـ وعلى وصلات النافبار ايضا طالما فهمت فكرة التعديل وإضافة classجديد على روابط الأزرار .
وعلى فكرة الدرس كان يمكن ان يكون بقسم تطوير المواقع ولكن احببت ان يكونهناك للإستفادة منه أكثر بتصميم الإستايلات ولمزيداً من الإحترافية .
بالـ css طريقه صنع زر نشط يتغير عند مرور الماوس عليه بسهولة
## إنتهي ##
شجون- الجنس :
عدد المساهمات : 502
النقاط : 53396
التقييم : 26
تاريخ التسجيل : 2010-02-23
Similar topics
» تعليم فلاش تشغيل الصوت والنص مع مرور الماوس
» * * تشغيل/تعطيل الإقتباس المتعدد * رد مع اقتباس نص المساهمة * * * * كود لجعل كلمة تلحق الماوس بطريقة روعة
» مجموعة من الكتب الإلكترونية التي تساعدك على بناء منتداك بسهولة
» خمسون طريقه وطريقه لزرع الثقه فى نفس طفلك ؟؟
» اروع اكواد الماوس الخيالية فى جميع الصفحات
» * * تشغيل/تعطيل الإقتباس المتعدد * رد مع اقتباس نص المساهمة * * * * كود لجعل كلمة تلحق الماوس بطريقة روعة
» مجموعة من الكتب الإلكترونية التي تساعدك على بناء منتداك بسهولة
» خمسون طريقه وطريقه لزرع الثقه فى نفس طفلك ؟؟
» اروع اكواد الماوس الخيالية فى جميع الصفحات
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
|
|