Hide this notice

مرحبا أنت تستخدم انترنت اكسبلورر ٦ و هو متصفح اصدر في العام 2001 الا يبدو لك ذلك قديما .

نحن ننصحك بقوة بترقية متصفحك إلى نسخة أحدث مثل أنترنت اكسيلورر ٨ أو فايرفوكس و الذي سيتيح لك تصفح أفضل ليس لموقعنا فقط بل في كل أرجاء الأنترنت..

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

Screenshot

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

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

المشكلة :

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

صورة gif

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

الحلول :

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

الطريقة 1:

  1. المصدر : http://homepage.ntlworld.com/bobosola/index.htm
  2. و هي ياستدعاء ملف جافا سكريبت صغير و الذي يمكنك تحميله من هنا
  3. ووضع الكود التالي في منطقة الهيدربين Head و /head
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

الطريقة 2:


<link rel="stylesheet" href="/pngHack/pngHack.css" type="text/css" />

مع التأكد من تحديد طول و عرض كل صورة تستخدمها و إلا سيتم تحويلها إلى حجم 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);

}

مصادر أخرى :

بقلم : فاطمة العمادي

أم و زوجة .. مصممة حرة و مصورة .. عرف الناس كتاباتي التقنية من خلال شخصية خيالية هي الدكتور نت . اصمم المواقع منذ العام ١٩٩٩م .

أوسمة : , , , , , , ,