منتدى استراحات زايد - تحويل حقل بحث إلى صوره "تكويد حقل بحث"

<div>بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته ..

أخباركم ؟؟/\ إن شاء الله بخير

اليوم بشرح طريقه غير موجوده في العالم العربي أو أنها موجوده لكن لم أتوصل إلى شرح لها

أنا بحثت بشكل موسع ولم أجد شيئ ..

على العموم الشرح يعرفه البعض والبعض لا يعرفه

توصلت إليه بمجهودي الشخصي "الله على المجهود" بعد أن فقدت الامل في البحث

المهم أحس أني تفلسفت كثير على شي تافه ..

الشرح راح يكون تحويل حقل بحث إلى صوره يعني "تكويد حقل بحث" .. أتوقع ما فهمتو وش السالفه
لكن تابع الشرح وإن شاء الله تفهمون ..

بالبدايه هذا مثال

[ من هنا ]
أولا : عندنا كود حقل بحث وهذا الكود الي بنسوي الشرح عليه
رمز PHP:

ناتج الكود هذي الصوره

طيب الان ننشئ وكلاس للكود كامل
وبيكون الناتج هذا الكود
رمز PHP:

أتوقع الكود مفهوم وما يحتاج شرح

الان أضف كلاسات لزر ولحقل البحث .. والناتج هذا الكود
رمز PHP:

مثل ما تشوفون الكود أضفنا كلاس لزر وكلاس لحقل البحث

طيب !! هذي الصوره الي راح تكون حقل بحث

أوكي !! الان نستدعي الصوره بالكلاس الشامل للكود
وهذا كود أستدعاء الصوره
رمز PHP:

.sr {
background-image:url('xxx.xxx');
}

بمكان الاكسات رابط وصيغة الصوره
للمعلوميه الشرح بلغة الـ "css"

طيب أوكي نظبط الان تمدد الصوره والعرض والطول .. ليكن الكود كالتالي
رمز PHP:

.sr {
background-image:url('2.PNG');
background-repeat:no-repeat;
height:29px;
width:205px;
}

ألحين بتكون الصوره خلفيه لكود البحث

لكن لازم نزيل التنسيق القديم لحقل البحث و زر البحث

الان نظيف الكود الكود التالي لكلا الكلاسن لكلاس الزر والحقل
رمز PHP:

.sr1{
float:right;
الكود السابق يعني الاتجاه ووضعنا الاتجاه يمين
border:0px black solid;
الكود السابق يعني إطار ووضعنا حجم الاطار صفر لا تضع حجم الاطار صفر إلا بعد الانتهاء من تنسق المكان
margin:5px 11px 0px 0px;
الكود السابق يعني مكان الحقل في الصوره
background:transparent;
الكود السابق يعني خلفيه شفافه
text-align:right;
الكود السابق يعني إتجاه النص لليمين
font-family:Arial, Helvetica, sans-serif;
الكود السابق يعني نوع الجط
}
.sr2 {
float:right;
الكود السابق يعني الاتجاه ووضعنا الاتجاه يمين
border:0px black solid;
الكود السابق يعني إطار ووضعنا حجم الاطار صفر لا تضع حجم الاطار صفر إلا بعد الانتهاء من تنسق المكان
background:transparent;
الكود السابق يعني خلفيه شفافه
margin:5px 11px 5px 5px;
الكود السابق يعني مكان الزر في الصوره
}

أتمنى يكون الشرح واضح .. وأي استفسار أنا جاهز

تقبلوا خالص تحياتي ../

المصدر | تحويل حقل بحث إلى صوره "تكويد حقل بحث"