IE PNG problemi

Daha önce IE Transparan PNG Sorunu’ndan bahsetmiştik. Burada üst üste kullanımlarda ve background scale sorunu gibi sorunlar vardı. TwinHelix yazdığı bu iepngfix eklentisi ile neredeyse tüm sorunları ortadan kaldırmış. Sorunları kaldırmakla da kalmamış yeni özellikler bile eklemiş. Sayfasında kullanımı çok güzel anlatılmış (ingilizce). Ben sayfanın tamamını çevirmek yerine nasıl kullanılacağını anlatıyım.

iepngfix.zip dosyasını indirip açtığınızda içerisinden bize gerekli dosyalar iepngfix.htc ve blank.gif. iepngfix.htc dosyasında düzenlememiz bir yer var. 15. satırdaki şu kısım :

if (typeof blankImg == 'undefined') var blankImg = 'blank.gif';

buradaki blank.gif kısmını, sizin blank.gif dosyasının tam yolunu vermelisiniz. örneğin, /images/blank.gif gibi. Daha sonra eğer bir css dosyası kullanıyorsanız, css dosyasının başına,

img.png, div.png { behavior: url("/css/iepngfix.htc") }

gibi bir satır eklemelisiniz. burada img.png ve div.png tamamen örnek olarak yazılmıştır, aşağıda buraya geri döneceğiz. Tabii ki ‘/css/iepngfix.htc’ kısmını da sitenize yüklediğiniz htc dosyasının url si olmalı. Sayfanıza ekli bir css dosyanız yoksa, html dosyasınzın </head> tagından hemen önce

<style type="text/css">
  img.png, img.div { behavior: url("/css/iepngfix.htc") }
</style>

şeklinde kullanabilirsiniz. Evet şimdi img.png ve img.div kısımlarını açıklayalım.
Burada transparan png kullanacağınız id ve class ları yazmalısınız.
örneğin;

img.png { behavior: url(iepngfix.htc) }

şeklinde css dosyanıza eklediniz, bir png transparan resmi çağırırken

<img src="/images/header.png" alt="Header Image" width="248" height="47" border="0" class="png" />

yukarıda class=”png” kısmına dikkat!
veya başka bir örnek..

div#header { behavior: url(iepngfix.htc) }

şeklinde css dosyanızın içerisine yazdınız. HTML dosyanızda transparan olmasını istediğiniz png dosyası, hangi id’ye background olarak tanımladıysanız, o div’in id’sini veya class’ını vermelisiniz.

<div id="header">
  <!-- bu div'in arka plan görüntüsü transparan png dir. -->
  </div>

Sitenizde kullandığınız tüm resim dosyaları .png ve transparan ise,

img { behavior: url(iepngfix.htc) }

şeklinde tüm img taglarına bunu uygulayabilirsiniz.

Script GPL altında dağıtılıyor. Yazan arkadaş(lar)a geliştirme, belgelendirme gibi yaptığı hizmetler için dilerseniz bu adresten bir yemek ısmarlayabilirsiniz.

İlgili Bağlantılar :
iepngfix.zip
iepngfix.zip diğer yansı (güncellenmez)
IE PNG Fix Sayfası
Online demo ve kullanım sayfası
Bağış sayfası

Thanks TwinHelix !

Yorum eklemek için çok geç, 21-08-2009 tarihinde yoruma kapatıldı.