رفع مشکل اينترنت اکسپلورر با فايل هاي PNG


 

نويسنده:محمد کرامتي




 
اگر تاکنون از فايل هاي گرافيکي با فرمت PNG در طراحي صفحات وب خود استفاده کرده باشيد، مطمئناً متوجه مشکل Internet Expelorer با اين نوع فايل ها شده ايد. همانطور که در شکل زير مشاهده مي کنيد، IE نمي تواند آبجکت هاي گرافيکي با فرمت PNG (که اکثر آيکون هاي تحت وب نيز داراي اين فرمت هستند) را به صورت ترانسپارنت (Transparent) نمايش دهد و فضاهاي خالي آن را با کادري رنگي پرمي کند .اين مشکل در IE باعث به هم خوردن تعادل گرافيکي وب سايت و درنتيجه کاهش زيبايي و جذابيت آن براي کاربران مي شود. در اين مقاله مي خواهيم راه حل مناسب و آساني را براي حل اين مشکل ارائه کنيم.
براي رفع اين Bug درIE ازيک فايل جاوا اسکريپت استفاده مي کنيم.
Visual Studio را باز کنيد و از منوي New گزينه File را انتخاب کنيد.
در بخش Categories از کادر New File که باز شده است گزينه web را انتخاب کنيد.
در بخش Templates از کادر New File گزينه Jscript File را انتخاب و دکمه Open را کليک کنيد.
سورس کد زير را در فايلي که باز شده است وارد کنيد.

var arversion=navigtor.appversion.split(MSIE
var version=parsefloat(arversion[1]
if((version>=5.5)&&(document.body.filters
{
for(var i=0;i<document.images.length;++)
{
var img=document.images[i]
var imgName=img.src.toUpperCase
if(imgName.substring(imgName.length-3,imgName.
lingth)=="PNG)
{
ar imgID=((img.id)?"id="+img.id+
var imgClass=img.className)?"class="'+img.className+"':
var imgtitle=(img.titie)?"title=+"img.title+"' ':"title=''+img.alt+"' "
var imgstyle="display;inline-block;"+img.
style.cssText
if(image.algin=="left")imgStyle= "float: flet"+
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:DXLmageTransform.Microsoft.Alphalmageloader"
+"(scr=\"'+img.src+"\',
sizingmethod='scale');\"></span>"
img.outerHTML=strNEWHTML
i=i-1
 

}
}
}
- از منوي file گزينه save را انتخاب کنيد.
-درکادرsave file نام pngfix را به عنوان نام فايل وارد کرده و دکمه save را کليک کنيد.
-فايل pngfix.js را که ايجاد کرده ايد در بخش Root پروژه خود درvisual studioکپي کنيد.
-در تگ <Head> صفحاتي که مي خواهيد فايل هاي PNG به صورت Transparent نمايش داده شوند اين کد را وارد کنيد:
<[.if lt IE7]--!>-
<script script defer type="text/javascript" src="pngfix.js"></>-
<--[endif]!>-
منبع:نشريه دنياي کامپيوتر و ارتباطات شماره 83