من طرف بسم الله الرحمن الرحيم
سأشرح لكم اليوم درس خفيف لمن لديه معلومات بسيطة عن كتابه أوامر css .
وهو ازرار الـ Rollover وطرق تنفيذه يمكن ان تختلف وتتنوع وهى الأزرار التى تكون عبارة عن صور تتغير عند مرور الماوس عليها الى نفس الصورة ولكن بتأثير آخر
وفى العادة كنا نقوم بعمل تلك الأزرار ببرنامج الفرنت بيج عن طريق تبادل الصور وموجودة ايضا نفس الطريقه في برنامج الدريم ويفر ـ فنضع صورة Original وهى التى تظهر لاول مرة ثم نضع صورة أخري للـ Rollover وهى التى سوف تظهر للزائر بمجرد بمرور الماوس على نفس الزر .
حلو
وكانت هذه الطريقه في أكثر الحالات تكون بطيئة جدا ولا تظهر بسلاسة بمجرد وقوف مؤشر الفارة على الزر او الصورة ـ لانها كانت تعتمد على دوال لتغير طريقه العرض او اسكربت ( مش عارف ) وتجد بعد الإنتهاء ان الكود الناتيج ضخم جدا وبه الكثير من الأوامر التى لا تعرفها ..عال معى الان شاهد هذا المثال [url=عال معى الان شاهد هذا المثال]هنـــا [/url]وشوف الحلاوة والجمال لو نظرت الى كود الصفحه النظيف جدا وسرعه تغير الصورة
قارن بين ماشاهدته ولو قمت بعمل نفس الصفحه على الطريقه القديمة بأكثر من صورة للتبادل
المهم وحتى لا أطيل ـ من الان أنسي كل هالطرق القديمه وتعال إذا كنت تريد ان تصمم زر متحرك عند التأشير عليه سواء كان فى الهيدر او الفوتر او كان أحد أزرار المنتدى قطعه بهذا الشكل في صورة واحده فقط .
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الصورة الأولى وهى الصورة التى تظهر في الوضع الطبيعى والثانيه عند التأشير ــ والتحكم فيه سوف يكون عن طريق أوامر 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;
}
home وهى الفئة الذى نحدد فيه ابعاد الصورة وطريقه عرضها ووضعها بالتصميم
background : مسار صورة الزر التى تحتوى على الحالاتين .
background-repeat : الصورة ثابته ولا تتكرر .
background-position : موضع الصورة ( افقي- راسي ).
height : أرتفاع الزر الحقيقي original ـ
width : عرض الزر الحقيقى .
display: block : حتى يتم تعريف هذا العنصر بشكل مستقل .
float : التجانب على اليمين او كما تحب ان يكون حسب التصميم.
home:hover وهو الذى من خلاله نتحكم بظهور الصورة الجديدة عند التأشير
ونفس الصورة وضعناها مرة أخري وتم حذف كل من الطول والعرض والتجانب وتعريف العنصر لانهم معرفين من قبل
والجديد هو موضع الصورة وفيه ارتفعنا بمقدار 37 ( بالسالب ) وهو ارتفاع الزر الحقيقى لان الصورة التى وضعناها تحتوى على الزرين بإرتفاع 74 .
وتعرّف هذه الفئات بداخل وسوم الروابط a مباشرة
كما بالشكل التالي ..
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
كما أنك يمكن أن تصنع نفس تأثير الـ hover على ازار ( موضوع جديد ـ إضافة رد ) ـ وعلى وصلات النافبار ايضا طالما فهمت فكرة التعديل وإضافة class جديد على روابط الأزرار .
وعلى فكرة الدرس كان يمكن ان يكون بقسم تطوير المواقع ولكن احببت ان يكون هناك للإستفادة منه أكثر بتصميم الإستايلات ولمزيداً من الإحترافية .
سأشرح لكم اليوم درس خفيف لمن لديه معلومات بسيطة عن كتابه أوامر css .
وهو ازرار الـ Rollover وطرق تنفيذه يمكن ان تختلف وتتنوع وهى الأزرار التى تكون عبارة عن صور تتغير عند مرور الماوس عليها الى نفس الصورة ولكن بتأثير آخر
وفى العادة كنا نقوم بعمل تلك الأزرار ببرنامج الفرنت بيج عن طريق تبادل الصور وموجودة ايضا نفس الطريقه في برنامج الدريم ويفر ـ فنضع صورة Original وهى التى تظهر لاول مرة ثم نضع صورة أخري للـ Rollover وهى التى سوف تظهر للزائر بمجرد بمرور الماوس على نفس الزر .
حلو
وكانت هذه الطريقه في أكثر الحالات تكون بطيئة جدا ولا تظهر بسلاسة بمجرد وقوف مؤشر الفارة على الزر او الصورة ـ لانها كانت تعتمد على دوال لتغير طريقه العرض او اسكربت ( مش عارف ) وتجد بعد الإنتهاء ان الكود الناتيج ضخم جدا وبه الكثير من الأوامر التى لا تعرفها ..عال معى الان شاهد هذا المثال [url=عال معى الان شاهد هذا المثال]هنـــا [/url]وشوف الحلاوة والجمال لو نظرت الى كود الصفحه النظيف جدا وسرعه تغير الصورة
قارن بين ماشاهدته ولو قمت بعمل نفس الصفحه على الطريقه القديمة بأكثر من صورة للتبادل
المهم وحتى لا أطيل ـ من الان أنسي كل هالطرق القديمه وتعال إذا كنت تريد ان تصمم زر متحرك عند التأشير عليه سواء كان فى الهيدر او الفوتر او كان أحد أزرار المنتدى قطعه بهذا الشكل في صورة واحده فقط .
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الصورة الأولى وهى الصورة التى تظهر في الوضع الطبيعى والثانيه عند التأشير ــ والتحكم فيه سوف يكون عن طريق أوامر 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;
}
home وهى الفئة الذى نحدد فيه ابعاد الصورة وطريقه عرضها ووضعها بالتصميم
background : مسار صورة الزر التى تحتوى على الحالاتين .
background-repeat : الصورة ثابته ولا تتكرر .
background-position : موضع الصورة ( افقي- راسي ).
height : أرتفاع الزر الحقيقي original ـ
width : عرض الزر الحقيقى .
display: block : حتى يتم تعريف هذا العنصر بشكل مستقل .
float : التجانب على اليمين او كما تحب ان يكون حسب التصميم.
home:hover وهو الذى من خلاله نتحكم بظهور الصورة الجديدة عند التأشير
ونفس الصورة وضعناها مرة أخري وتم حذف كل من الطول والعرض والتجانب وتعريف العنصر لانهم معرفين من قبل
والجديد هو موضع الصورة وفيه ارتفعنا بمقدار 37 ( بالسالب ) وهو ارتفاع الزر الحقيقى لان الصورة التى وضعناها تحتوى على الزرين بإرتفاع 74 .
وتعرّف هذه الفئات بداخل وسوم الروابط a مباشرة
كما بالشكل التالي ..
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
كما أنك يمكن أن تصنع نفس تأثير الـ hover على ازار ( موضوع جديد ـ إضافة رد ) ـ وعلى وصلات النافبار ايضا طالما فهمت فكرة التعديل وإضافة class جديد على روابط الأزرار .
وعلى فكرة الدرس كان يمكن ان يكون بقسم تطوير المواقع ولكن احببت ان يكون هناك للإستفادة منه أكثر بتصميم الإستايلات ولمزيداً من الإحترافية .
» الان صمم موقعك في خمس خطوات بسيطة(مع الشرح)
» فن تسويق المنتج
» فن تسويق المنتج
» <iframe name="I1" width="651" height="4349" src="mr.x@xxx.com">
» اختراق الاجهزة عن طريق ال ip
» ارجوا المساعده
» برنامج الداونلود اكسلريتور وهو من اروع البرامج لتسريع تنزيل الملفات من الإنترنت
» Templates for free برنامج جميل جدا باستطاعته ان يعطيك ويحرر قوالب جديدة لصفحتك
» xara webstyle , بالإصدار الرابع ,لتصميم كل رسومات الويب
» وفاة المدرب العراقي الاسطورة عمو بابا
» كأس القارات: الفيفا يرفض الاحتجاج المصري
» إنتر ميلان بتسعة لاعبين يسقط ميلان ويغرد وحيدا على قمة الدوري
» سر جمالك هنا !!!
» طريقة نشر منتداك في جوجل و محركات البحث---حصري---
» تقدم شركة برنامج البث المباشر (بامبيوزر) حسابات كاملة بدون إعلانات
» مشكلة انخفاض عدد متابعي الصفحات على فيسبوك
» رونالدو ـ جميع التصريحات التي نسبت لي غير صحيحة
» تعرّفي على الخلطات الطبيعية للعناية بالشعر وتغذيته
» Accelerate 2003 v4.0 Retail برنامج لزيادة سرعة اتصالك بالانترنت حقيقي وفعال , بعد تنصيبه وتفعيله بالفعل ستشعر الفرق
» يرنامج SMS-it! المجاني يسمح لك بإرسال قصيرة و مسجات إلى أي هاتف محمول عن طريق الحاسوب الشخصي
» Oxygen Phone Manager for Symbian phones برنامج اوكسجين لادارة جميع انواع الموبايلات و الهواتف الذكية التي تستخدم نظام سيمبيان
» i.Xchange Mobile Partner MT A02 1 برنامج جميل ويسهل من تنظيم الرسايل في جوالك.
» برنامج Nokia PC Suite هو برنامج رسمي ومجاني من الشركة المصنعة الشهيرة .نوكيا. للهواتف النفالة
» هذا البرنامج BlackBerry Database Viewer خاص لمستخمدي جهاز بلاك بيري black berry
» Quick Slide Shown هذا البرنامج والادوات العديدة الموجودة فيه تستطيع بسهولة انشاء افلام فلاش بصيغ عديدة.
» ميرو من افضل البرامج التي تساعدك على تحميل الفيديو من الانترنت والتعامل معها على جهازك
» subtitle workshop 2.51 subtitle workshop 2.51 من اقوى البرامج في مجال ترجمة الافلام والفيديوهات.
» Coollector موسوعة الافلام ويكيبيديا للأفلام
» بالـ css طريقه صنع زر نشط يتغير عند مرور الماوس عليه بسهولة
» الان وحصريا ... اسهل واقوى طريقة لاحاطة وتاطير جميع القوالب بإستخدام Css
» وداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css
» إستيل المنتدى الإسلامي هديه لكل أعضاء منتدانا الكرام
» تصميم وتطوير مواقع الانترنت
» اشتري دردشة 123 فلاش شات واحصل على الدومين والاستضافة مجانا
» Snake Eye Vision برنامج عبارة عن نسخ تقنية او نسخ قدرة عين الافعى وتحويلها الى تقنية وكتابتها كبرنامج
» Times Tables هل طفلك يواجه صعوبة في تنظيم وقته ؟ ليس لديك الوقت لتساعد طفلك ايضا ؟
» Basic Algebra Shape-Up برنامج متميز من البرامج التفاعلية والتعليمية الرياضية الذي يهدف إلى تبسيط الجبر بحيث يعلم الطلاب إنشاء الصيغ الرياضية
» Math Games Level 1 Math Games Level 1 هذا البرنامج التعليمي المختص بتعليم الرياضيات منذ البداية من جمع وضرب من الرقم 1 حتى 12
» MultipliK12 لعبة تعليمية تختص بتقوية مهارات الطفل الحسابية بشكل ممتع و شيق يحث الطفل على على التعلم و ينمي لديه حب تعلم الرياضيات.