26 Mart 2007 Pazartesi

İnternet Explorer için Alternatif PNG Desteği

Merhabalar,
Eminim Hepiniz IE'nin PNG desteği verememesi sorunuyla uğraşmışsınızdır.
Her nekadar IE7'nin yarım yamalak bir PNG desteği olsa bile IE6 hala bizim müdahelemize ihtiyaç duyuyor.
PNGleri çalıştırmak için bir sürü yöntem var bende size Javascript yardımıyla bu işi yaptırıcam umarım güzel olur başlayalım,
Fonkisoyunumuzun düzgün çalışması için bir dosyaya ihtiyacımız var BLANK.GIF
bu Dosyayı indirdip ulaşabileceğimiz bir yere koyduktan sonra.

şu fonksiyonu kullanıyoruz.



function pngImages(){
var img;
if(document.all){
for(x=0;x < arguments.length;x++){
elm = document.getElementById(arguments[x]);
img = (elm.src)? elm.src : (elm.background)? elm.background : (elm.backgroundImage)? elm.backgroundImage : "";
elm.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='" + img + "')";

if(elm.src)
elm.src = "images/blank.gif";
else if(elm.background)
elm.background = "images/blank.gif";
else(elm.backgroundImage)
elm.backgroundImage = "images/blank.gif";
}
}
}

Fonksiyon bütün ona yolladığımız elementlerin varsa SOURCE'una yada BACKGROUND'una blank.gif yerleştirip CSS sayesinde BACKGROUND-IMAGE'a da PNG resmini koyacak.

Fonksiyonu Sayfa tamamen yüklendikten sonra (onload) bu şekilde çağırmalısınız.


pngImages("logo","faq","forum","blog");

Bir deneyin bakalım birçok yöntemden daha hızlı ve sadece belirli nesneye yönelik olduğudan açılırken sadece ihtiyaç duyulan resimleri çevirerek hız kazanabilirsiniz.
bu avantajların yanında çevirmek istediğiniz her nesneye ID vermek zorunda olmanız ise DEZAVANTAJ.

İyi Çalışmalar..

3 yorum:

Volkan Ozcelik dedi ki...

if(document.all){ ...

sorun yaratacaktır. Firefox'un son sürümleri ve sanırım Opera'da document.all sentaksını destekliyor.

Gerçi teoride bir sorun olmaz; firefox activex denetiminden anlamadığı için ve "filter" w3c standartlarında varolmayan bir css özelliği olduğu için DXImageTransform işlevi sonuç vermeyecektir.

Yine de document.all yerine başka bir nesneyi kontrol etmek ya da en güzeli "conditinal comment"ler

http://www.quirksmode.org/css/condcom.html

kullanmak daha yerinde olabilir.

sevgiler,
Volkan.

Serkan Yerşen dedi ki...

Haklısın Volkan,
document.all kullanmamın sebebi kodu biraz daha basit tutmak istememdi, benim kullandığım versiyonda

if(/MSIE/.test(navigator.userAgent))

Şeklinde kontrol ediyorum.
"document.all" birazda eski bir alışkanlık :)

ama dediğin gibi
document.all artık çalışmayabilir.

Buarada Conditional Comment'ler çok güzel ancak JS dosyalarının içinde çalışmadıklarından. ben genelde CSS söz konusu olduğunda kullanıyorum...

Volkan Ozcelik dedi ki...

Düşündüm de Aslında en güzeli kullandığın ActiveX filtresi üzerinde bir object kontrolü

if(typeof document.body.style.filter != "undefined")
{
activex filtresini uygula
}
else
{
; //do nothing
}

sevgiler.