أنت في : الرئيسية :: تصميم و تطوير المواقع :: موضوع: حلول لعرض صور png شفافة على IE

الدكتور نت

السلام عليكم

منذ العام 1999م و نحن نحاول الارتقاء بالمصمم و المطور العربي عبر إضافة دروس و مقالات و دروات لتساعده على إنشاء و تطوير موقعه . لو كنت أحد هؤلاء و أحببت مساعدتنايمكننا أن ندلك على عدد من الأمور التي يمكنك القيام بها لمساعدتنا اضغط هنا و أقرأ أكثر عن الموضوع ..

حلول لعرض صور png شفافة على IE

بقلم: الدكتور نت مواضيع أخرى لنفس المحرر الدكتور نت

◄ حول الموضوع

وصف الموضوع

معظم المتصفحات الحديثة تدعم عرض صور png الشفافة و التي تتميز بجودة عالية و حجم صغير إلا IE لكن هناك بعض الحلول التي يمكنك الاختيار منها ..

أرسل لصديق طباعة أضف للمفضلة صل للموضوع تعقيب

المشكلة :

كثيرا ما يخذلنا متصفح انترنت اكسبلورر في عرض الأشياء بشكل صحيح .. المشكلة التي نتحدث عنها اليوم هي دعم المتصفح للتعامل مع PNG alpha transparency . قد يخطر على بالك انك ممكن ان تستخدم الصور الشفافة من نوع GIF و لا تستخدم PNG و بالتالي فهذه المشكلة لا تخصك لكننك باستخدام GIF و الذي كما يظهر في المثال في الأسفل تقبل بجودة أقل في الصور حيث يعيب دائما هذه الصيعة الهالة التي تظهر حول الصورة ..

أما PNG فالصور الشفافة جودتها عالية .. لكنها على متصفحات IE تظهر بالشكل التالي

الحلول :

في الحقيقة معظم الحلول تستند على نفس المبدأ و هو استخدام AlphaImageLoader و هو فلتر متوفر بدأ من IE5.5

الطريقة 1:

المصدر : http://homepage.ntlworld.com/bobosola/index.htm
و هي ياستدعاء ملف جافا سكريبت صغير و الذي يمكنك تحميله من هنا
ووضع الكود التالي في منطقة الهيدربين Head و /head


&lt;!--[if lt IE 7.]&gt;

&lt;script defer type=text/javascript src=pngfix.js&gt;&lt;/script&gt;

&lt;![endif]--&gt;

الطريقة 2:

المصدر : http://www.mongus.net/pngInfo/
حمل الملف التالي : http://www.mongus.net/pngInfo/pngHack.zip
فك ضغط الملف و حمل محتوياته إلى موقعك و ضع الشفرة التالية في منطقة الhead


&lt;link rel="stylesheet" href="/pngHack/pngHack.css" type="text/css" /&gt;

مع التأكد من تحديد طول و عرض كل صورة تستخدمها و إلا سيتم تحويلها إلى حجم 1*1 بكسل .

الطريقة 3:

الطرق السابقة تستخدم عند إضافة الصورة إلى المستند لكن ماذا لو استدعيت الصورة كخلفية أو من خلال CSS

مثلا لو أنشأت صندوق بواسطة CSS و اسميناه trans_box2 و أردنا استخدام الصورة mypix.png كخلفية شفافة له .


.trans_box2 {

font-family:verdana;

font-weight:bold;

padding:40px;

margin:30px;

border:solid 1px #555;

/* المتصفحات الاخرى ستتجاهل هذا السطر .. */

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='mypix.png');

}

/* اكسبلورر لا يتعرف على [class]

و بالتالي ستجاهل هذا السطر

*/

.trans_box2[class] {

background-image:url(mypix.png);

}