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

الموضوع: مساعدة بسيطة بـ CSS Image Opacity / Transparency

  1. #1

    مساعدة بسيطة بـ CSS Image Opacity / Transparency



    السلام عليكم ..

    عندي صفحة بالورد بريس .. الصفحة مخليها معرض صور .

    التأثير الموجود هنا http://www.w3schools.com/css/css_image_transparency.asp

    بالمثال الثاني Example 2 - Image Transparency - Mouseover Effect

    أريد معرفة كيف أقوم بتطبيق التأثير على جميع الصور الموجودة في صفحة واحدة، لا أريد جميع صفحات الموقع .. فقط صفحة واحدة (معرض الصور) ويتم تطبيق التأثير على جميع الصور بشكل تلقائي.

    حاولت أضيف الكود للصفحة بالطريقة :

    كود:
    <style type="text/css">
    opacity:0.4;
    filter:alpha(opacity=40)
    onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100
    onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40
    </style>
    بس ما جاب أي تأثير .. أظن لأن إضافتي للـ onmouseover + onmouseout غير صحيحة ..

    أتمنى منكم أن تدلوني على الطريقة الصحيحة لأضيف الكود على كل الصفحة .. عوضًا عن كتابته عند كل صورة

    شكرًا لكم..

    ===

    السؤال بطريقة أخرى: من خلال الكود الموجود بالمثال ..

    كود:
    <img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
    onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
    onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
    أضفت السي اس اس للصفحة، لكن بقي onmouseover + onmouseout .. كيف أضيفهم للصفحة؟؟ للصفحة بأكملها وليس لصورة واحدة .. شكرًا .





    التعديل الأخير تم بواسطة Abdulrahman Hassoun ; 30-06-2011 الساعة 07:21 PM


  2. #2


    الآن انتبهت لغلطتي .. هي أني نسيت إضافة اسم العنصر إلى كود السي اس اس

    الكود اللي وضعته بالصفحة هو :

    كود:
    <style type="text/css">
    img
    {
    opacity:0.4;
    filter:alpha(opacity=40);
    onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100;
    onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40;
    }
    </style>
    كود السي اس اس تطبق، لكن لازالت المشكلة في مرور الماوس على الصور

    شكرًا مقدمًا ..






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


    كود:
    <style type="text/css">
    img
    {
    opacity:0.4;
    filter:alpha(opacity=40);
    }
    
    img:hover
    {
    opacity:1;
    filter:alpha(opacity=100);
    }
    </style>






    __________________
    Contact Me

  4. #4


    كود:
    <style type="text/css">
    img
    {
    opacity:0.4;
    filter:alpha(opacity=40);
    }
    
    img:hover
    {
    opacity:1;
    filter:alpha(opacity=100);
    }
    </style>
    للأسف نفس المشكلة ..

    عاين الصفحة هنا : http://www.ajmanprvs.com/portal/gallery

    و شكرًا جزيلًا لك






  5. #5
    عضو نشيط
    تاريخ التسجيل
    Apr 2010
    المشاركات
    196


    المشكلة ان img:hover لا تتوافق مع IE.
    ولحل هذه المشكلة جرب التالي:
    كود:
    <style type="text/css">
    img
    {
    opacity:0.4;
    filter:alpha(opacity=40);
    }
    
    a:hover img
    {
    opacity:1;
    filter:alpha(opacity=100);
    }
    </style>






    __________________
    Contact Me

  6. #6


    المشكلة ان img:hover لا تتوافق مع IE.
    ولحل هذه المشكلة جرب التالي:
    كود:
    <style type="text/css">
    img
    {
    opacity:0.4;
    filter:alpha(opacity=40);
    }
    
    a:hover img
    {
    opacity:1;
    filter:alpha(opacity=100);
    }
    </style>
    أنا أصلًا لم أجرب على الإكسبلورر .. أنا على الفايرفوكس ..

    ومع الأسف أيضًا هالتعديل لم يأتي بأي نتيجة ..

    شكرًا لمتابعتك الموضوع ..






  7. #7
    عضو نشيط
    تاريخ التسجيل
    Apr 2010
    المشاركات
    196


    قمت بعرض المصدر للصفحة، لاحظت أنك تضع الكود بهذا الشكل:

    كود:
                <style type="text/css"> img { opacity:0.4; filter:alpha(opacity=40); }</p>
     <p>
    img:hover { opacity:1; filter:alpha(opacity=100); } </style>
    لاحظ وجود وسوم <p> في الكود، قم بحذف الكود وعاود التجربة بوضع الكود التالي:

    كود:
    <style type="text/css">
    img
    {
    opacity:0.4;
    filter:alpha(opacity=40);
    }
    
    a:hover img
    {
    opacity:1;
    filter:alpha(opacity=100);
    }
    </style>






    التعديل الأخير تم بواسطة Blank ; 01-07-2011 الساعة 12:29 AM
    __________________
    Contact Me

  8. #8


    قمت بعرض المصدر للصفحة، لاحظت أنك تضع الكود بهذا الشكل:

    كود:
                <style type="text/css"> img { opacity:0.4; filter:alpha(opacity=40); }</p>
     <p>
    img:hover { opacity:1; filter:alpha(opacity=100); } </style>
    لاحظ وجود وسوم <p> في الكود، قم بحذف الكود وعاود التجربة بوضع الكود التالي:

    كود:
    <style type="text/css">
    img
    {
    opacity:0.4;
    filter:alpha(opacity=40);
    }
    
    a:hover img
    {
    opacity:1;
    filter:alpha(opacity=100);
    }
    </style>
    ما فهمت عليك يالغالي أرجو التوضيح أكتر

    إذا كنت تقصد <p style="text-align: center;"> + </p> اللي ببداية ونهاية كود الصور .. فجربت إزالتهم .. بدون فائدة ..

    أرفقت لك كود الصفحة كامل .. أرجو منك توضيح الخطأ اللي فيه





    الملفات المرفقة الملفات المرفقة

  9. #9
    عضو نشيط
    تاريخ التسجيل
    Apr 2010
    المشاركات
    196


    الكود الموجود بالمرفقات يظهر بشكل جيد دون أخطاء ربما تحصل الأخطاء عند دمج كود css داخل الصفحة مباشرة دون وضعه بين وسمي head وهو ما يسبب تداخل أكواد css مع الوسوم وغيرها من مكونات الصفحة.

    لتفادي كل المشاكل السابقة، سوف نقوم بفصل أكواد css عن كود الصفحة html .

    1- قم بتحميل html.txt من المرفقات وضع الأكواد المدرجة فيه داخل صفحة عرض الألبوم.

    2- ضع الكود التالي في ملف style.css الخاص بالثيم المستخدم في المدونة:
    كود:
    .gallery-box img
    {
    opacity:0.4;
    filter:alpha(opacity=40);
    }
    
    .gallery-box a:hover img
    {
    opacity:1;
    filter:alpha(opacity=100);
    }






    الملفات المرفقة الملفات المرفقة
    • نوع الملف: txt html.txt‏ (8.2 كيلوبايت, 15 مشاهدات)
    __________________
    Contact Me

  10. #10


    الكود الموجود بالمرفقات يظهر بشكل جيد دون أخطاء ربما تحصل الأخطاء عند دمج كود css داخل الصفحة مباشرة دون وضعه بين وسمي head وهو ما يسبب تداخل أكواد css مع الوسوم وغيرها من مكونات الصفحة.

    لتفادي كل المشاكل السابقة، سوف نقوم بفصل أكواد css عن كود الصفحة html .

    1- قم بتحميل html.txt من المرفقات وضع الأكواد المدرجة فيه داخل صفحة عرض الألبوم.

    2- ضع الكود التالي في ملف style.css الخاص بالثيم المستخدم في المدونة:
    كود:
    .gallery-box img
    {
    opacity:0.4;
    filter:alpha(opacity=40);
    }
    
    .gallery-box a:hover img
    {
    opacity:1;
    filter:alpha(opacity=100);
    }
    الآن تمام التمام بارك الله فيك

    على الفايرفوكس والكروم تمام .. بس الإكسبلورر لا.. على كلن لا مشكلة.

    جزاك الله كل خير .. وشكرًا لك .






  11. #11
    عضو نشيط
    تاريخ التسجيل
    Apr 2010
    المشاركات
    196


    الكود السابق قمت بتجربته على IE8 وهو يعمل.
    ولكن يبدو أنه لا يتوافق مع إصدارات أخرى منه.

    جرب الآتي...

    في ملف style.css

    استبدل:

    كود:
    .gallery-box img
    {
    opacity:0.4;
    filter:alpha(opacity=40);
    }
    
    .gallery-box a:hover img
    {
    opacity:1;
    filter:alpha(opacity=100);
    }

    بالتالي:

    كود:
    .gallery-box img
    {
    zoom: 1;
    -moz-opacity:0.4;
    -khtml-opacity:0.4;
    opacity:0.4;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter:alpha(opacity=40);
    }
    
    .gallery-box a:hover img
    {
    zoom: 1;
    -moz-opacity:1;
    -khtml-opacity:1;
    opacity:1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100);
    }






    __________________
    Contact Me

  12. #12


    الكود السابق قمت بتجربته على IE8 وهو يعمل.
    ولكن يبدو أنه لا يتوافق مع إصدارات أخرى منه.

    جرب الآتي...

    في ملف style.css

    استبدل:

    كود:
    .gallery-box img
    {
    opacity:0.4;
    filter:alpha(opacity=40);
    }
    
    .gallery-box a:hover img
    {
    opacity:1;
    filter:alpha(opacity=100);
    }

    بالتالي:

    كود:
    .gallery-box img
    {
    zoom: 1;
    -moz-opacity:0.4;
    -khtml-opacity:0.4;
    opacity:0.4;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter:alpha(opacity=40);
    }
    
    .gallery-box a:hover img
    {
    zoom: 1;
    -moz-opacity:1;
    -khtml-opacity:1;
    opacity:1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100);
    }
    أنا بالبداية جربت على الإصدار التاسع.. وما اشتغل الكود ..

    لكن الآن بالكود الجديد اشتغل بالشكل المطلوب 100% وعلى جميع المتصفحات ^_^

    شكرًا جزيلًا لك .. وجزاك الله كل خير .










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

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

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