شرح طريقة تحويل أزرار الاكشن الى صور

[HaMaDa4eVeR]

السلام عليكم ورحمة الله
لعل هذه هي المرة الأولى التي يتم فيها شرح طريقة تحويل ازرار الاكشن او الفورم الى صورة ، سوف نستخدم الـCascading Style Sheet لتغير الزر ،
دعونا نبدا بتغير زر تسجيل الدخول الموجود في الـNavbar

لنفتح محرر الـPHP الذي نستخدمه ونحضر اليه قالب الـnavbar
قم بالبحث عن كلمة

$vbphrase[log_in] 

طبعا هذا هو الجزء الخاص بزر ( تسجيل الدخول )

<input type="submit" class="button" value="$vbphrase[log_in]" tabindex="4" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" /> 

لنقم بمسح الـvalue ،، اي نمسح القيمة وتصبح بهذ الشكل :-

value="   " 

الان نقم باضافة هذا الكود في أي مكان في منطقة الزر

style="cursor:hand; border-style: solid; border-width: 0; margin: 0; padding-left: 29px; padding-right: 40px; padding-top: -1px; padding-bottom: 10px; background-image: url('imagez/buttons/enter.gif');  background-color: #008E8A; background-repeat: no-repeat; background-position: right top;" 

وهذه الخطوة أهم خطوة وينبغي التركيز فيها
واليك تعريف بسيط لهذا الكود
طبعا هذا الكود عبارة عن كود Cascading Style Sheet ،، أهم متغير هو

background-image: url('imagez/buttons/enter.jpg'); 

والصورة enter.jpg هي صورة الزر ، قم بفتح برنامج الجرافيك المفضل لديك وصمم الزر بهذه المقايس:-
الطول = 105 بيكس والعرض 25 بيكسل
لون الخلفية

 background-color: #008E8A; 

يمكنك تغيره اذا لم يكن لديك لون في خلفية الزر.

يمكنك التحكم مستقبلا في جم الزر عن طريق تغير قيم الـpading
بقية القيم أتركها كما هي ولا توجد ضرورة لتغير اي شي فيها
الان أصبح لدينا الزر جاهزاً
وهذه هي محتويات كود الزر كاملة :-

<input type="submit" class="button" value=" " style="cursor:hand; border-style: solid; border-width: 0; margin: 0; padding-left: 33px; padding-right: 40px; padding-top: -1px; padding-bottom: 15px; background-image: url('imagez/buttons/enter.jpg');  background-color: #008E8A; background-repeat: no-repeat; background-position: right top;" tabindex="4" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" /> 

يمكنك استبدال هذا الكود بالكود اللي في خلية زر ( تسجيل الدخول )
بعد التعديل قم بالحفظ واتجه لمنتداك لمشاهدة الزر
[IMG][IMG]2.gif[/IMG] [/IMG]
ويمكنك بهذه الطريقة تعديل كافة ازرار المنتدى الى صور باستبدال الكود أعلاهـ بكود زر الاضافة ،، وانتبه عند تغير الزر الى نوع الزر هل هو submit أم rest ،،
قم بمحاولة تغير زر اضافة + مشاهدة الموضوع
وطبعا القالب المسوؤل هو newthread

أتمنى ان اكن قد أفدتكم وقدمت لكم حاجة جديدة
مع تحياتي HaMaDa4eVeR

[مغرور]

درس جميل وافاده رائعه

الله يجعله بموازين حسناتك يا رب ويوفقك اخوي حمد

[عبد الله هُربي]

روعة أخي الكريم ..

والف الف شكر لك ..

والى الاماااااااااااااااام ..







وخالص المودة ،،

[HaMaDa4eVeR]

السلام عليكم
مغرور + مجاهد
لكم أفضل الشكر والتقدير لمرورك
وتقبلوا فائق شكري وامتناي لكم
والسلام عليكم

[MaYsTr0o]

روعه والله كان نفسى اعلق على حاجه زى ديه بس انتا جبت المفيد

[مغرور]

رفعت الدرس لعموم الفائده ولأني بالفعل رجعت ابحث عنه

جزاك الله خير للمرة الثانيه اخوي