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

Abdulrahman Hassoun · 06:21 PM

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

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

.

التأثير الموجود هنا 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, 06:44 PM

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

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

كود:

<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>

كود السي اس اس تطبق، لكن لازالت المشكلة في مرور الماوس على الصور

شكرًا مقدمًا

..

Blank · 30-06-2011, 09:43 PM

كود:

<style type="text/css">
img
{
opacity:0.4;
filter:alpha(opacity=40);
}

img:hover
{
opacity:1;
filter:alpha(opacity=100);
}
</style>

Abdulrahman Hassoun · 30-06-2011, 10:07 PM

إقتباس:

المشاركة الأصلية بواسطة Blank

كود:

<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

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

Blank · 30-06-2011, 11:07 PM

المشكلة ان 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>

Abdulrahman Hassoun · 30-06-2011, 11:18 PM

إقتباس:

المشاركة الأصلية بواسطة Blank

المشكلة ان 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>

أنا أصلًا لم أجرب على الإكسبلورر .. أنا على الفايرفوكس ..

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

..

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

..

Blank · 11:29 PM

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

كود:

            <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>

Abdulrahman Hassoun · 30-06-2011, 11:37 PM

إقتباس:

المشاركة الأصلية بواسطة Blank

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

كود:

<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> اللي ببداية ونهاية كود الصور .. فجربت إزالتهم .. بدون فائدة ..

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

Blank · 01-07-2011, 12:10 AM

الكود الموجود بالمرفقات يظهر بشكل جيد دون أخطاء ربما تحصل الأخطاء عند دمج كود 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);
}

Abdulrahman Hassoun · 01-07-2011, 01:05 PM

إقتباس:

المشاركة الأصلية بواسطة Blank

الكود الموجود بالمرفقات يظهر بشكل جيد دون أخطاء ربما تحصل الأخطاء عند دمج كود 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); }

الآن تمام التمام بارك الله فيك

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

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

.

Blank · 01-07-2011, 03:21 PM

الكود السابق قمت بتجربته على 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);
}

Abdulrahman Hassoun · 01-07-2011, 05:07 PM

إقتباس:

المشاركة الأصلية بواسطة Blank

الكود السابق قمت بتجربته على 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% وعلى جميع المتصفحات ^_^

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

.

المواضيع المشابهه
الموضوع	كاتب الموضوع	القسم	الردود	آخر مشاركة
مساعدة بسيطة	hidoussi	الويب والويب 2.0 والـ Semantic Web	3	31-07-2008 02:33 AM
مشكلة FILTER: alpha(opacity=80) مع الفاير فوكس	الجنيدي	الويب والويب 2.0 والـ Semantic Web	5	27-11-2006 07:21 PM
مساعدة في برمجة vb.net (( مساعدة بسيطة ))	elkaser	الويب والويب 2.0 والـ Semantic Web	4	23-04-2004 02:07 AM
مساعدة بسيطة وينطلق موقعي الجديد - ممكن مساعدة ؟؟	elkaser	الويب والويب 2.0 والـ Semantic Web	9	27-01-2004 04:50 AM

أدوات الموضوع
مشاهدة نسخة مطبوعة إرسال هذه الصفحة