رفع مشکل اینترنت اکسپلورر با فایل های 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