النتائج 1 إلى 4 من 4

الموضوع: سؤال سهل على أعضاء هذا المنتدى العملاق ( زر css )

  1. #1
    عضو نشيط
    تاريخ التسجيل
    Jun 2010
    المشاركات
    39

    سؤال سهل على أعضاء هذا المنتدى العملاق ( زر css )



    السلام عليكم ورحمة الله وبركاته
    أعزائي أعضاء هذا الصرح الشامخ و المنتدى العملاق
    لدي سؤال متأكد أن إجابته عندكم وهو سهل عليكم ان شاء الله

    أريد صنع زر يتكون من صورتين
    الصورة التالية هي الزر في الحالة الطبيعية




    و الصورة التالية هي شكل ظهور الزر عند مرور الماوس فوقه



    عملتها بالجافا سكريبت ولكن أرغب بعملها بالـ css
    و بشكل عام في مثل هذه الحالة ما هي أفضل طريقة لعمل هذا

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







  2. #2
    عضو نشيط
    تاريخ التسجيل
    May 2010
    المشاركات
    35

    Talking



    تفضل اخوي
    اولا هذا كود الـ css
    كود PHP:
    <style type="text/css">
    <!--
    #majado2
    {
     
    background-imageurl(مسار الصورة الاصلية);
     
    padding5px;
     
    width137px;  
     
    height62px;
     
    position:absolute
    }
    #majado2:hover
    {
     
    background-imageurl(مسار الصورة بعد مرور الماوس);
     
    }
    -->
    </
    style
    لا تنسى مقاسات الصوره لازم تكون مضبوطه

    وهذا كود الـ html

    كود PHP:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    title>Untitled Document</title>
    <
    link href="aqar-rent.css" rel="stylesheet" type="text/css" />
    </
    head>
    <
    body>
    <
    div><a id="majado2" href="services.php"  title="الخدمات" ></a></div>
    </
    body>
    </
    html

    جرب وبالتوفيق يا صديقي :nice:





    التعديل الأخير تم بواسطة majado2 ; 23-07-2010 الساعة 06:52 AM

  3. #3
    عضو نشيط
    تاريخ التسجيل
    Jun 2010
    المشاركات
    39


    أشكرك جداً جداً جداً على المساعدة :app:
    لو تعلم كم سررت بردك الرائع ياغالي :eek2:
    جزاك الله كل خير
    وهذا الكود كاملا مع ضبط الصور و الأبعاد فقد يستفيد غيري من بعدي منه أيضاً
    و الصور مرفوعة على النت أي الكود جاهز :
    كود HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <style type="text/css">
    #majado2
    {
     background-image: url(http://img834.imageshack.us/img834/2605/90259863.png);
     padding: 5px;
     width: 84px;  
     height: 75px;
     position:absolute; 
     background-repeat:no-repeat;
    }
    #majado2:hover
    {
     background-image: url(http://img6.imageshack.us/img6/245/47823723.png);
    }
    </style>  
    </head>
    <body>
    <div><a id="majado2" href="http://www.tahasoft.com/vb"  title="الخدمات" ></a></div>
    </body>
    </html>









  4. معاً لنتعلم شكراً لأعضاء سوالف الكرام





    __________________
    ملون لخدمات التصميم





ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  

أضف موقعك هنا| اخبار السيارات | حراج | شقق للايجار في الكويت | بيوت للبيع في الكويت | دليل الكويت العقاري | مقروء | شركة كشف تسربات المياه | شركة عزل اسطح بالرياض | عزل فوم بالرياض| عزل اسطح بالرياض | كشف تسربات المياة بالرياض | شركة عزل اسطح بالرياض