الحل الأمثل للتعامل مع ملفات Png

السلام عليكم ورحمة الله وبركاتة

حصلت حكاية ظريفة قوى لأصدقائى ظاظا وجرجير و هو إن كان جرجير بيصمم فى موقع و استخدم فيه صور PNG و كانت تظهر بدون شفافية على IE6 فأستعان بظاظا و كان هذا هو الحوار......

جرجير: ظاظا.... ياظاظا .... قوم فوق و صحصحلى شويه.

ظاظا: فيه إيه يا جرجير بتقومنى من النوم ليه :eek: ؟

جرجير: أنا واقع فى ورطة و مفيش حد غيرك إللى هيحلها .

ظاظا: خير ... إيه هى المشكلة :o ؟

جرجير: مطلوب منى تصميم موقع و استخدمت فيه صور PNG كثير و لما جيت أستعرضها على المتصفحات لقيت المتصفح الوحيد إللى مبيعرضش صور PNG شفافة هو IE6 و المشكلة إن لسه فى ناس بتستخدمة فقولى أعمل إيه فى المشكلة دى؟

ظاظا: شوف يا جرجير علشان تخلى IE6 يعرض صور PNG بشفافية يبقى لازم تستخدم DirectX معاه.

جرجير: انت بتقول إيه يا ظاظا .... أنا إللى أعرفة إن DirectX بنتعامل معاه فى Desktop Application بس يبقى إيه التخاريف إللى بتقولها دى ... هو انت لسه مصحتش من النوم؟

ظاظا: :eek: أنا صحيت من النوم فعلاً و دى مشتخارف يا جرجير ... هو فعلاً ممكن نستخدم DirectX مع IE و ده عن طريق إضافتة كفلتر فى Style للصورة.

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

ظاظا: أمرى لله يا عم العبقرية .... أول حاجة لازم تضع تاج <img> داخل <span> و تجعل التاج <img> شفاف بنسبة 100% وذلك بواسطة إستعمال DirectX كفلتر كالأتى

<img style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" src="$ImageFile" width="$width" height="$height">

و بعدين تعطى Style للتاج <span> مستخدم فيه العرض و ارتفاع و اجعل display يساوى inline-block وبعدين نحمل فيه الصورة بواسطة DirectX كفلتر أيضاً كالأتى

<span style="width: $width px; height: $height px; display:inline-block; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=$url);">

و بكده هيكون المثال كله كالأتى

<span style="width: $width px; height: $height px; display:inline-block; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=$url);"><img style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" src="$ImageFile" width="$width" height="$height"></span>

و طبعاً يا جرجير بعبقريتك هتعرف إن لازم نبدل المتغيرات إللى بتبدأ بـ $

جرجير: اه طبعاً طبعاً دى حاجة بسيطة جداً بس فيه مشكلة تانية و هى إن السورس ده مش هيشتغل مع المتصفحات التانية فيبقى إيه العمل؟

ظاظا: بالعقل و بالمفهومية كده يا جرجير لازم نعرف نوع المتصفح إيه و بعدين نصدر الكود إللى عوزينة.

جرجير: و إزاى نعرف حكاية نوع المتصفح؟

ظاظا: شوف يا جرجير أنا عاوز أكمل نومى و علشان كده خد Function دى و هى هتعمل اللازم

function get_image_tag($url, $width, $height)

{

	$image = '<img src="' . $url . '" width="' . $width . '" height="' . $height . '" border="0" >';

	if(strstr(strtolower($_SERVER["HTTP_USER_AGENT"]) , 'msie'))

	{

		$result = split(";",$_SERVER["HTTP_USER_AGENT"]);

		foreach ($result as $key => $value)

		{

			if(strstr(strtolower($value) , 'msie'))

			{

				$result = split(" ",trim($value));

				if(floatval($result[1]) < 7)

					$image = '<span style="width:' . $width . 'px;height:' . $height . 'px; display:inline-block; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' . $url . ');"><img style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" src="' . $url . '" width="' . $width . '" height="' . $height . '" border="0"></span>';

				break;

			}

		}

	}

	return $image;

}

جرجير: و Function دى بستعملها فى PHP :nose_pick: ؟

ظاظا: :mad:

--------------------

و هنا استطاع ظاظا أن ينام ولكن بسبب حالة إغماء سببها جرجير له :unsure:

الحل الأمثل للتعامل مع ملفات Png

مواضيع مشابهة