[maviruya]

Merhaba

web işi ile uğraşan herkez bir kez olsada sayfa içinde Transparan bir PNG eklemeyi denemiştir. Firefox eklenen Transparan PNG görüntülemede bir sorun yaşamazken internet Explorerda aynı sonucu almamız mümkün olmuyor. Erik Arvidsson kullanılışı çok basit bir yöntem ile IE 5.5 ve sonrası versiyonlarıda Win32 Platformu üzerinde çözüme ulaşmış. Tüm ihtiyacınız img elementine png behavior eklemek. Aşağıda bunu nasıl yapabileceğini gösteren style örnek olarak ekledim. Bu style dışında iki adet dosyayada ihtiyacınız olacak. Bunlardan biri pngbehavior.htc ve diğer dosya ise 1x1 pixel boyutunda transparan bir gif olan blank.gif dosyası. Bu iki dosyanında aynı klasörde olmaları önemli bir not. Eğer blank.gif dosyasının yerini değiştirmek istiyorsanız pngbehavior.htc içinde blank.gif geçtiği satırı bulup taşımak istediğiniz url yazabilirsiniz.

<style type="text/CSS">
img { behavior: url("pngbehavior.htc") }
</style>

Bu iki dosyanın yanında Erik Arvidsson'un konuyu daha iyi anlatan, örneklerinde içinde bulunduğu dosyayı http://webfx.eae.net/download/pngbehavior102.zip altınan indirebilirsiniz. Kolay gelsin.

[David Wenham]

Mükemmel bir kaynak, teşekkür ederim kendi adıma..

[cgencer]

.htc'ye izin vermek güvenlik problemi teşkil edecek bir kapı açmaktır. aşağıdaki .js kod parçacığı da png problemlerini çözmeyi sağlamakta.

<script language="JavaScript" type="text/JavaScript">
<!--
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
      }
   }
}
//--></script>

[maviruya]

Açıkcası .htc uzantılı dosyaların güvenlik açığına neden olduklarını bilmiyordum. Ben uzun zamandır kullandığım bu yöntemden verim aldığım için sizlerle paylaşmak istedim. Uyarı için teşekkürler cgencer. Eklemiş olduğun script benim vermiş olduğum yöntemden daha basit ve kullanışlı. Fakat script bu hali ile çalışmıyor. Scripti bir function içine almamız ve browserin açılışta bu scripti çalıştırması için onload olayını başlamamız gerekli. cgencer sunmuş olduğun pratik yöntem için tekrar teşekkürler.

<script language="JavaScript" 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=\"" + "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.onload = fixPng;
//--></script>

[David Wenham]

<IMG> tagıyla kullanıldığında çalışıyor, fakat CSS de style="background:url(img/k2.png) repeat-x bottom " şeklinde kullandığımda transparan özelliği çalışmıyor. Nasıl düzeltebilirz acaba bunu?

[fatihunal]

David Wenham tarafından gönderilen mesaj:

<IMG> tagıyla kullanıldığında çalışıyor, fakat CSS de style="background:url(img/k2.png) repeat-x bottom " şeklinde kullandığımda transparan özelliği çalışmıyor. Nasıl düzeltebilirz acaba bunu?

Ben böyle çözmüştüm.

transparan PNG sorunu

Başka bir çözüm yoluda bulamadım.

[emremer]

Transparent PNG'ı table arkaplanı yapmak böyle bir konuda geçmişti. (şimdiden söylim, örnekteki yaptığım iş değiştirilmiş. bu ne biçim iş diye kızmayın sonra )

.