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

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

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

كود PHP:

$vbphrase[log_in]

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

كود PHP:

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

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

كود PHP:

value=" "

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

كود PHP:

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 ،، أهم متغير هو

كود PHP:

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

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

كود PHP:

background-color: #008E8A;

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

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

كود PHP:

<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]
ويمكنك بهذه الطريقة تعديل كافة ازرار المنتدى الى صور باستبدال الكود
أعلاهـ بكود زر الاضافة ،، وانتبه عند تغير الزر الى نوع الزر هل هو submit
أم rest ،،
قم بمحاولة تغير زر اضافة + مشاهدة الموضوع
وطبعا القالب المسوؤل هو newthread

الف شكر .. دائم الأبـداع
~ ~

نورت ياَ غالي <<

» حصريا مع اقوى واشهر العاب الاكشن والاثاره المنتظره لعام 2011 Crysis 2 FLT 7.67G
» فيلم الاكشن والرعب الرائع Aliens Vs Ninjas 2010 مترجم بجودة DvdRip على أكثر من سيرفر
» :: درس تحويل رجل عجوز الى شاب
» افتراضي عملاق تحويل صيغ الفيديو Nidesoft DVD Ripper 5.6-FFF
» تحويل روابط [.السيرفرات] لمباشرة وتدعم الأستكمال !!!