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

09 - 08 - 2005, 14:00 HaMaDa4eVeR غير متواجد حاليآ بالمنتدى

HaMaDa4eVeR

:: عضـــو::

بيانات موقعي

اسم الموقع: PHP.SD

اصدار المنتدى: صفحتي

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

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

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

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

توقيع HaMaDa4eVeR

وطن الخير أفريقيا مكانك

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

رقم المشاركة : [ 2 ]

11 - 08 - 2005, 13:13 Asorah غير متواجد حاليآ بالمنتدى

Asorah .:: عضو متألق ::.	رد : شرح طريقة تحويل أزرار الاكشن الى صور رائع اخوي شكرا لك والمزيد منك يارب مع الف تحيه Asorah أضفني كصديق مشاركة هذا الرد في Digg Del.icio.us Technorati Twitter
Asorah .:: عضو متألق ::.

رقم المشاركة : [ 3 ]

11 - 08 - 2005, 13:14 x_5 متواجد حاليآ بالمنتدى

x_5

:: TRAIDNT ::
:: رفيق الدرب ::

بيانات موقعي

اسم الموقع: vbulletin.ae

اصدار المنتدى: :: مجتمع ترايدنت ::

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

يعطيك العافية

x_5

أضفني كصديق

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

توقيع x_5

‏‏كُنْ فيْ الْحياهْ كَعابر سبيلٍ وَاتْرُكْ وراءكَ كُل أثرِ جَميل
فَما نَحنُ فِيْ الدُنيا إِلَاضُيُوْف وَما عَلى الضيوْفِ إِلَاالرحيل
واحــد مـــ x_5ـــن النـاس ©

رقم المشاركة : [ 4 ]

14 - 08 - 2005, 21:45 os6orah غير متواجد حاليآ بالمنتدى

os6orah :: عضو نشيط ::	رد : شرح طريقة تحويل أزرار الاكشن الى صور جميل بارك الله فيك os6orah أضفني كصديق مشاركة هذا الرد في Digg Del.icio.us Technorati Twitter
os6orah :: عضو نشيط ::

رقم المشاركة : [ 5 ]

26 - 08 - 2005, 07:18 دحمـــــي غير متواجد حاليآ بالمنتدى

دحمـــــي

:: عضـــو::

بيانات موقعي

اصدار المنتدى: صفحتي

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

رائع

دحمـــــي

أضفني كصديق

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

رقم المشاركة : [ 6 ]

17 - 02 - 2006, 06:43 alq0rsan غير متواجد حاليآ بالمنتدى

alq0rsan

:: عضو نشيط ::

بيانات موقعي

اصدار المنتدى: صفحتي

شكرا على الطريقه والله يوفقك

alq0rsan

أضفني كصديق

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

توقيع alq0rsan

الموقع www.t506.com
المسنجر او البريد الالكتروني t506com

hotmail.com

أدوات الموضوع
عرض صفحة طباعة الموضوع ارسال الصفحة الى صديق
طرق العرض
العرض العادي الانتقال الى العرض المتطور الانتقال الى العرض الشجري

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

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