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

[said]

http://www.dzbatna.com/images/icons/iconrote.gif ط´ط±ط* ط·ط±ظٹظ‚ط© طھط*ظˆظٹظ„ ط£ط²ط±ط§ط± ط§ظ„ط§ظƒط´ظ† ط§ظ„ظ‰ طµظˆط± (http://www.dzbatna.com/t23999/)


السلام عليكم ورحمة الله
لعل هذه هي المرة الأولى التي يتم فيها شرح طريقة طريقة تحويل ازرار الاكشن او الفورم الى صورة ، سوف نستخدم الـCascading Style Sheet لتغير الزر ،
دعونا نبدا بتغير زر تسجيل الدخول الموجود في الـNavbar
http://212.0.148.2/~muataz9/lina/1.gif
لنفتح محرر الـPHP الذي نستخدمه ونحضر اليه قالب template الـnavbar
قم بالبحث عن كلمة
رمز PHP:

<code style="white-space:nowrap"> <code> $vbphrase&#91;log_in&#93;
</code> </code>

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

<code style="white-space:nowrap"> <code> <input type="submit" class="button" value="$vbphrase&#91;log_in&#93;" tabindex="4" title="$vbphrase&#91;enter_username_to_login_or_register&#93;" accesskey="s" />
</code> </code>

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

<code style="white-space:nowrap"> <code> value=" "
</code> </code>

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

<code style="white-space:nowrap"> <code> 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;"



</code> </code>

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

<code style="white-space:nowrap"> <code> background-image: url('imagez/buttons/enter.jpg');
</code> </code>

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

<code style="white-space:nowrap"> <code> background-color: #008E8A;
</code> </code>

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

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

<code style="white-space:nowrap"> <code> <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&#91;enter_username_to_login_or_register&#93;" accesskey="s" />
</code> </code>

يمكنك استبدال هذا الكود code بالكود code اللي في خلية زر ( تسجيل الدخول )
بعد التعديل قم بالحفظ واتجه لمنتداك لمشاهدة الزر
2.gif http://212.0.148.2/~muataz9/lina/2.gif
ويمكنك بهذه الطريقة تعديل كافة ازرار المنتدى forum الى صور باستبدال الكود code أعلاهـ بكود code زر الاضافة ،، وانتبه عند تغير الزر الى نوع الزر هل هو submit أم rest ،،
قم بمحاولة تغير زر اضافة + مشاهدة الموضوع
وطبعا القالب template المسوؤل هو newthread

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




التعديل الأخير كان بواسطة HaMaDa4eVeR; 09 - 08 - 2014 الساعة 14:13

ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)



https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©