حالة الموضوع:
مغلق
  1. :: dev-vb ::

    :: dev-vb :: Developer

    الأنتساب:
    ‏7 مارس 2012
    المشاركات:
    21
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    1
    [​IMG]



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

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

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


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

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


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

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


    [​IMG]

    [​IMG]


    [​IMG]

    أولا : عندنا كود حقل بحث وهذا الكود الي بنسوي الشرح عليه

    كود PHP:
                                <form action="search.php" method="get" 
    <
    input type="text" name="q" size="20"
    <
    input type="submit" value="" name="B1"
    </
    form>  
    ناتج الكود هذي الصوره

    طيب الان ننشئ <div> وكلاس للكود كامل
    وبيكون الناتج هذا الكود

    كود PHP:
    <div class="sr"
    <
    form action="search.php" method="get" 
    <
    input type="text" name="q" size="20"
    <
    input type="submit" value="" name="B1"
    </
    form
    </
    div
    أتوقع الكود مفهوم وما يحتاج شرح

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

    كود PHP:
    <div class="sr"
    <
    form action="search.php" method="get" 
    <
    input class="sr1" type="text" name="q" size="20"
    <
    input class="sr2" type="submit" value="" name="B1"
    </
    form
    </
    div
    مثل ما تشوفون الكود أضفنا كلاس لزر وكلاس لحقل البحث

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

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

    كود 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:ArialHelveticasans-serif;
    الكود السابق يعني نوع الجط
    }

    .
    sr2 {
        
    float:right;
    الكود السابق يعني الاتجاه ووضعنا الاتجاه يمين
        border
    :0px black solid;
    الكود السابق يعني إطار ووضعنا حجم الاطار صفر لا تضع حجم الاطار صفر إلا بعد الانتهاء من تنسق المكان
        background
    :transparent;
    الكود السابق يعني خلفيه شفافه
        margin
    :5px 11px 5px 5px;
    الكود السابق يعني مكان الزر في الصوره
    }
    أتمنى يكون الشرح واضح .. وأي استفسار أنا جاهز

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


    [​IMG]
     
  2. boubisad

    boubisad Developer

    الأنتساب:
    ‏8 مارس 2012
    المشاركات:
    32
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    6
    الإقامة:
    تونس الخضراء
    رد: تحويل حقل بحث إلى صوره "تكويد حقل بحث"

    يعطيـكك العاآفيـه اخـوٍي
     
حالة الموضوع:
مغلق

مشاركة هذه الصفحة