PNG for IE 6 and Older Browsers Error

ကၽြန္ေတာ္တို႔ေတြ Web Design ဆြဲတဲ႔အခါမွာ Transparent ေတြပါတက္ပါတယ္။ Transparent အကိုအေကာင္းဆံုးအလုပ္လုပ္ႏိုင္တာကေတာ႕ PNG Format ပါပဲ။ ဒါေပမယ္႔ PNG Format က IE6 နဲ႔ အျခား Browserေတာ္ေတာ္မ်ားမ်ားမွာ Supprort မလုပ္ပါဘူး။ PNG ကိုမသံုးပဲ GIF Format ကိုေျပာင္းသံုးမယ္ဆိုရင္လည္း။ GIF မွာက Shadow ေတြ Transpaency ေတြကို ေကာင္းေကာင္းအလုပ္ မလုပ္ပါဘူး အနားေတြမွာ အျဖဴေရာင္ေတြေပၚေနတက္ပါတယ္။ ဒါေၾကာင္႔ PNG Format ကိုသံုးရတာပါ။ PNG Format မွာ PNG 24 and PNG 8 ႏွစ္မ်ဳိးႏွစ္စားရိွပါတယ္။ PNG 8ကေတာ႔ GIF Format နဲ႔ ထူးမျခားနားပါပဲ။PNG 24 ကိုပဲသံုးတာအေကာင္းဆံုးပါပဲ။ PNG Formatနဲ႔သံုးေတာ႔မယ္ဆိုရင္ Browser တိုင္းနဲ႔ အဆင္ေျပေအာင္ Javascript ကိုသံုးရပါတယ္။ Javascript ၾကားလို႔ လန္႔မသြားပါနဲ႔ဦး ကၽြန္ေတာ္လည္း Programming ေကာင္းေကာင္းမတက္ပါဘူး၊ ဒါေပမယ္႔ HTML တက္ရံုနဲ႔ အသံုးျပဳလို႔ရပါတယ္။ pngfix.js File ကို Download လုပ္ပါ။လုပ္ပံုလုပ္နည္းႏွစ္ခုရိွပါတယ္။

Method 1 (Copy and Paste)

ဒီနည္းကေတာ႔ စာမ်က္နာတစ္ခုတည္းအတြက္ HTML page ရဲ႕ Head tag အတြင္းမွာ အသံုးျပဳမွာျဖစ္ပါတယ္။ေအာက္ကcdoeေလးကို <!–[if lt IE 7]>မွ<![endif]–> အထိ Copy လုပ္ၿပီး PNG ပါတဲ႔ HTML pages ရဲ႕ Head tag မွာ paste လုပ္လိုက္ပါ။ ဒါဆိုရင္ PNG ဟာလွလွပပေပၚလာမွာပါ။

<!--[if lt IE 7]>

<script language=”JavaScript”>

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.

{

var arVersion = navigator.appVersion.split(“MSIE”)

var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters))

{

for(var i=0; i<document.images.length; i++)

{

var img = document.images[i]

var imgName = img.src.toUpperCase()

if (imgName.substring(imgName.length-3, imgName.length) == “PNG”)

{

var imgID = (img.id) ? “id=’” + img.id + “‘ ” : “”

var imgClass = (img.className) ? “class=’” + img.className + “‘ ” : “”

var imgTitle = (img.title) ? “title=’” + img.title + “‘ ” : “title=’” + img.alt + “‘ “

var imgStyle = “display:inline-block;” + img.style.cssText

if (img.align == “left”) imgStyle = “float:left;” + imgStyle

if (img.align == “right”) imgStyle = “float:right;” + imgStyle

if (img.parentElement.href) imgStyle = “cursor:hand;” + imgStyle

var strNewHTML = “<span ” + imgID + imgClass + imgTitle

+ ” style=\”" + “width:” + img.width + “px; height:” + img.height + “px;” + imgStyle + “;”

+ “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”

+ “(src=\’” + img.src + “\’, sizingMethod=’scale’);\”></span>”

img.outerHTML = strNewHTML

i = i-1

}

}

}

}

window.attachEvent(“onload”, correctPNG);

</script>

<![endif]–>

Method 2: (Recommended) JS Include File

ဒီနည္းကေတာ႔ PNG ပံုပါတဲ႔ web page တိုင္းအတြက္ pangfix.js file ကိုေခၚသံုးမွာပါ။ pngfix.js file ကိုခင္ဗ်ားရဲ႕ web project folder ထဲထဲ႔လိုက္ပါ။ ၿပီးေတာ႕ PNG ပံုပါတဲ႔ web pages တိုင္းရဲ႕ head tag မွာဒီ Codeေလးထဲ႕လိုက္ပါ။ code ရဲ႕ src=”pngfix.js” ေနရာမွာ ခင္ဗ်ား pngfix.js ရိွတဲ႔ေနရာကိုထဲရမွာပါ။ခင္ဗ်ားက pngfix.js file ကို script folder ထဲမွာထဲ႔မယ္ဆိုရင္၊ Src=”script\pngfix.js” ဆိုၿပီးေရးရမယ္။ဒီလိုလုပ္ၿပီးရင္ေတာ႔ ခင္ဗ်ား PNG ပံုေလးေတြကို အေႏွာက္ယွတ္ကင္းကင္းေတြ႔ႏိုင္ၿပီေပါ႔ဗ်ာ။

Head Tag ထဲမွာေရးရန္ Code

<!–[if lt IE 7.]>
<script defer type=”text/javascript” src=”pngfix.js”></script>
<![endif]–>

About Author

My name is chan min maung and my close friends call me phoe chan.Phoe chan is a one of the top professional web designers in Myanmar.Phoe chan was born in Myanmar West Bago Division,Pyay Town in 1983 .Phoe chan had got A.G.T.I (Information Technology) in Pyay Technological University.Phoe chan had created many tutorials such as Adobe Photoshop, Adobe Flash, Adobe Dreamweaver, HTML, XHTML, CSS, Javascript, PHP, WordPress, Joomla,CMS,web hosting service and web developement. Phoe chan is love the design and knowledge sharing.That is his hobby.