PNG Resimlerinde Transparan Arkaplan Sorunu
Arşivim, Kullandıklarım, Webmaster kategorisine 25 Kasım 2008 tarihinde yazılmış.
Arkaplanı transparan olan .png uzantılı resimleri sitenize eklediğinizde eğer sitenizi ziyaret eden IE7 altında bir sürüm kullanıyorsa arkaplanları transparan görmez. Bu sorunu çözmek için sitenize küçük bir javascript kodu eklemeniz yeterli. Aşağıda verdiğim kodu sayfanızda HEAD tagları arasına ekleyin.
Not : Kod Ceviz.net forumundan alınıp editlenmiştir. Resmin buhulanma sorunu kaldırılmıştır.
JavaScript:
-
<script type="text/JavaScript"><!--
-
function fixPng() {
-
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="\" mce_style="\""" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
-
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
-
+ "(src=\'" + img.src + "\');\"></span>"
-
img.outerHTML = strNewHTML
-
i = i-1
-
}
-
}
-
}
-
}
-
window.onload = fixPng;
-
// --></script>
Aralık 17th, 2008 on 18:01
Bu sorunu yaşamıştım ve uzun süre çözememiştim. Zamanım olunca tekrar siteye dönüp kodu kullanacağım.
Mayıs 1st, 2010 on 11:40
Bazen düşünüyorum, acaba bu IE yazarları hiç mi düşünmüyor bunları? Web Programlama yazarı olarak “keşke IE olmasaydı” diyorum.