Murat BütünWeb Tasarım ve Arama Motorları Optimizasyonu

Geçenlerde internet explorerdeki png sorunu ile ilgili sizlere bir css çözüm yolu göstermiştim. Şimdi bu sorunu daha kesin ve kolay bir yöntemle çözelim. Bu sefer baş rolümüzde css değil javascript var. Öncelikle sayfamıza aşağıdaki kodu ekliyoruz.

<script defer type="text/javascript" src="pngfix.js"></script>

Daha sonra buradaki pngfix.js diye bir javascript dosyası oluşturalım ve içerisine

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{
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
var imgAttribs = img.attributes;
for (var j=0; j<imgAttribs.length; j++)
{
var imgAttrib = imgAttribs[j];
if (imgAttrib.nodeName == “align”)
{
if (imgAttrib.nodeValue == “left”) imgStyle = “float:left;” + imgStyle
if (imgAttrib.nodeValue == “right”) imgStyle = “float:right;” + imgStyle
break
}
}
var strNewHTML = “<span ” + imgID + imgClass + imgTitle
strNewHTML += ” style=\”" + “width:” + img.width + “px; height:” + img.height + “px;” + imgStyle + “;”
strNewHTML += “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”
strNewHTML += “(src=\’” + img.src + “\’, sizingMethod=’scale’);\”></span>”
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent(“onload”, correctPNG);

yazalım işte bu kadar artık bütün png formatındaki görüntüleriniz internet explorerde de sorunsuz görünecek

Merhabalar arkadaşlar bir tasarımcının en büyük sıkıntılarından bir tanesi internet explorer sorunudur. O güzel resim formatı .png internet explorerde nasıl görünür biliyoruz sanırım. Png çalışamasının arka planı beyaz görünmektedir. Artık bazı büyük web sayfaları bile sitelerini tasarlarken internet exploreri takmıyor.

[html]
#resim {
width: 200px;
height: 75px;
background-image: url(images/logo.png) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/logo.png’, sizingMethod=’scale’);

}
[/html]

yukarıdaki kodları kendi png dosyanıza göre düzenleyip kullanabilirsiniz

Kullanım ;

<div id="resim"></div>