Internet Explorer 6 için saydam PNG desteği
“PNG, “Taşınabilir Ağ Grafiği” anlamındaki (Portable Network Graphics) ‘in kısaltmasıdır ve kayıpsız sıkıştırarak görüntü saklamak için kullanılan bir saklama biçimidir. PNG biçiminde paletli ya da gerçek renkte görüntüler seçimlik bir saydamlık kanalıyla saklanabilir.” şeklinde tanımlanmış vikipedi’da
PNG – GIF
* PNG dosyaları GIF’e göre daha fazla sıkıştırılır, yani daha az yer kaplar
* GIF 256 renk desteklerken PNG 48 bit trucolor destekler
* GIF sadece binary saydamlığı desteklerken PNG alfa kanal desteğiyle sınırsız saydamlık sağlar.
PNG’nin GIF’e göre tek dezavantajı hareketli resimler desteklememesi idi ki bunuda hallettiler. Firefox3 ile birlikte Hareketli PNG desteğinin geleceğine dair haberler geliyor kulağımıza.
PNG kullanımın en büyük avantajı alfa kanılı desteği ile bizlere kusursuz geçiş efekti olanağı sunmasıdır.
Web dünyasında PNG yayılmasını engelleyen en büyük sebep Internet Explorer’ın PNG desteğini 7. sürümüne kadar desteklememesidir. Tabi web kodlayıcıları Internet Explorer’ı beklemeden bazı düzeltme kodları üretti. Internet Explorer’ın desteklediği filter‘ın AlphaImageLoader özelliği sayesinde saydam PNG desteği sağlanmıştır.
kaynağı göster
yazdır?
1.img {
2. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
3.}
Bu kod problemimizi çözdü, ancak tümünü değil.
Saydam PNG düzeltmesi ile ilgili sorunlar
W3C ve Diğer farklı tarayıcı desteğinin olmayışı.
Bu kodu w3c ve diğer tarayıcılar desteklemediği için site doğrulamalarında(validation) sorun yaşamaktadır.
Artalan(background) olarak kullanımdaki sorunlar
Artalan olarak kullanılan saydam PNG’lerde konumlandırma ve yenileme özelliklerinin kullanılamaması sorunlarına neden oldu.
Geç yükleneme ve fazla kaynak kullanımı
AlphaImageLoader ile yüklenen resimler normal resme göre daha yavaş yükleniyor ve daha fazla kaynak tüketiyor. Ancak bu durum sadece ie6 kullanıcıları için geçerlidir.
Linklerde tıklama ve formlarda odaklanma sorunları
Artalan resmi olarak saydam png uygulanan elemanların içinde link bulunuyorsa bu linkler üzerine gidince tıklanamaz görünüyor ve form elemanlarıda odaklanamaz oluyor.
İlk yüklemede gösterilmeyen png’lerde ve Javascript ile oluştulmuş pnglerde sorun çıkarıyor
Bir içerik sayfa yüklendiğinde görünmez ise ve linke tıklayınca açılıyorsa png düzenlemesi işe yaramıyor.
Bir çok sorunları olmasına karşın tasarımcıların kod yazarlarını zorlayan sayfa tasarımlarını saydam PNG desteği olmadan çözmemiz çok zor. Bu nedenle sizlere saydam PNG kullanmanın yolları gösterecek bir iki örnek yapacağım. Benim kullandığım yöntem çok iyidir süperdir sakın başka yöntem kullanmayın demiyorum ben bu yöntemi kullanıyorum çünkü karşılaştığım tüm sorunların üstesinden bu yöntem geldi. Siz kaynaklar kısmındaki linkleri takip ederek farklı yöntemleri uygulayabilirisiniz.
İlk olarak bir saydam PNG resmini sitemize ekleyelim. Benim logomun bir gif birde png halini hazırlayıp saydam PNG’nin gözle görülür faydasını anlayalım.
kaynağı göster
yazdır?
01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "Linklerin Görülmesine İzin Verilmiyor.
Üye Ol ya da
Giriş Yap">
02.<html xmlns="Linklerin Görülmesine İzin Verilmiyor.
Üye Ol ya da
Giriş Yap">
03.<head>
04.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05.<title>Saydam PNG</title>
06.<style>
07..kutu{
08. background:url(images/ardalan.gif) top left no-repeat;
09. height:80px;
10. padding:10px
11.}
12.</style>
13.</head>
14.<body>
15. <div class="kutu"><img src="images/fatihhayri_logo.gif" alt="Logo" width="166" height="82" /></div>
16. <p>fatihhayri_logo.gif uygulaması</p>
17. <div class="kutu"><img src="images/fatihhayri_logo.png" alt="Logo" width="166" height="82" /></div>
18. <p>fatihhayri_logo.png uygulaması</p>
19.</body>
20.</html>
Örnek sayfayı görmek için Linklerin Görülmesine İzin Verilmiyor.
Üye Ol ya da
Giriş YapResimlerin Görüntülenmesine İzin Verilmiyor.
Üye Ol ya da
Giriş YapYukarıdaki örnek görüldüğü gibi logonun kenarlarındaki geçiş kısmında gif ve png arasında bariz farklar var. Yukarıdaki görüntüyü yeni nesil tarayıcılarda göreceğiz. Ama İnternet Explorer 6 ve önceki versiyonlarda görüntü aşağıdaki gibi olacaktır.
Resimlerin Görüntülenmesine İzin Verilmiyor.
Üye Ol ya da
Giriş YapKırmızı ile işaretlediğim ve resmi saran bir gri alan gibi saracaktır. Bunun anlamı bu tarayıcının saydam PNG desteğinin olmadığıdır. Bu sorunu gidermek için yukarıda bahsettiğimiz İnternet Explorer 6′nın desteklediği filter tekniği uygulayacağız.
kaynağı göster
yazdır?
01.function fixpngs(){
02.var l = document.getElementsByTagName('img');
03.for(i=0;i<l.length;i++){
04.p = 'images/0.gif';
05.n = l
.getAttribute('src');
06.g = n.toLowerCase();
07.if(g.substring(g.length-3)=="png"){
08.l.setAttribute('src',p);
09.l.style.cssText="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='"+n+"')";
10.}
11.}
12.}
13.window.onload = fixpngs;
Yukarıdaki js dosyasını incelersek. Sayfadaki tüm resimleri tarayıp png uzantılı olanları bulup IE’nin göstereceği stil özelliklerini bu png’ye atayacaktır. Birde burada bize saydam 1×1 saydam gif resmi gerekecektir. Bu saydam gif resim alanını dolduracaktır. Bu saydam gifi koymazsak resmin sol üstünde kırmızı x işareti çıkacaktır.
Yukarıdaki kodlamada kalın olarak belirttiğimiz yere siz kendi saydam 1×1 gif’inizin yerini yazacaksınız.
Benim bu yöntemi kullanmamın nedeni bir projede dinamik oluşturduğum saydam PNG ve sayfa yüklendiğinde görünür olmaya(display:none) sonradan görünen alanlardaki saydam PNG ile yaşadığım sorunları bu kodun çözmesidir.
Yukarıdaki kodu sayfamıza sadece IE7 öncesi görecek şekilde eklersek
kaynağı göster
yazdır?
01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "Linklerin Görülmesine İzin Verilmiyor.
Üye Ol ya da Giriş Yap">
02.<html xmlns="Linklerin Görülmesine İzin Verilmiyor.
Üye Ol ya da Giriş Yap">
03.<head>
04.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05.<title>Saydam PNG</title>
06.<style>
07..kutu{
08.background:url(images/ardalan.gif) top left no-repeat;
09.height:80px;
10.padding:10px
11.}
12.</style>
13.<!--[if lt IE 7]>
14.<script type="text/javascript" src="pngDuzenlemeKodu.js"></script>
15.<![endif]-->
16.</head>
17.<body>
18. <div class="kutu"><img src="images/fatihhayri_logo.gif" alt="Logo" width="166" height="82" /></div>
19. <p>fatihhayri_logo.gif uygulaması</p>
20. <div class="kutu"><img src="images/fatihhayri_logo.png" alt="Logo" width="166" height="82" /></div>
21. <p>fatihhayri_logo.png uygulaması</p>
22.</body>
23.</html>
Örneği görmek için Linklerin Görülmesine İzin Verilmiyor.
Üye Ol ya da Giriş Yap
Resimlerin Görüntülenmesine İzin Verilmiyor.
Üye Ol ya da Giriş Yap
Yukarıdaki ekran görüntüsü Internet Explorer 6′da sayfamızın görüntüsüdür.
Ardalan resmi olarak saydam PNG kullanımı
Resimlerde kullanımının dışında ardalan(background) resmi olarakta saydam PNG resimlerini kullanmamız gerekebilir. Benim en çok karşılaştığım durumlar resimlerin üzerine dinamik içerikli gölgeli kutular eklemk istediğimde ve renk geçişli ardalanların üzerine konan dinamik içerikli kutular eklemek istediğimde saydam PNG kullanmam gerekiyor. Tabi bir çok durumda gerekebilir, ben burada kafamızda bir örnek oluşması için bu örnekleri verdim.
Bu duruma örnek bir tasarıma bakarsak.
Resimlerin Görüntülenmesine İzin Verilmiyor.
Üye Ol ya da Giriş Yap
Yukarıdaki bir tasarımda. Ardalanında resim olan tasarım üzerindeki gölgeli dinamik içerikli kutu bizi saydam PNG kullanmaya itiyor. Ardalandaki resmin farklı sayfalarda değişeceğini düşünerek kodlayalım.
Resimlerin Görüntülenmesine İzin Verilmiyor.
Üye Ol ya da Giriş Yap
Bu bölüm farklı düşünülerek de kodlanabilir. Ben photoshop’da üç alanı saydam png olarak kaydettim
Resimlerin Görüntülenmesine İzin Verilmiyor.
Üye Ol ya da Giriş Yap
Saydam png kullanımının farklı yönlerini anlatmak için bu bölümü 3 kısma ayırdık. Bu şekilde kodumuzu yazarsak:
kaynağı göster
yazdır?
01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "Linklerin Görülmesine İzin Verilmiyor.
Üye Ol ya da Giriş Yap">
02.<html xmlns="Linklerin Görülmesine İzin Verilmiyor.
Üye Ol ya da Giriş Yap">
03.<head>
04.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05.<title>Saydam PNG</title>
06.<style>
07.#resim{
08.background:url(images/ardalan_resmi.jpg) top left no-repeat;
09.width:400px;
10.padding-top:15px;
11.height:300px;
12.}
13.#icerik{
14.width:207px;
15.margin-left:15px;
16.}
17.#icerikUstu{
18.background:url(images/icerik_ust.png) top left no-repeat;
19.height:10px;
20.}
21.#metinAlani{
22.background:url(images/icerik_orta.png) top left repeat-y;
23.font:11px Arial, Helvetica, sans-serif;
24.padding:0 10px
25.}
26.</style>
27.</head>
28.<body>
29.<div id="resim">
30.<div id="icerik">
31.<div id="icerikUstu"><img src="images/0.gif" width="1" height="1" /></div>
32.<div id="metinAlani"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent ultricies orci quis erat. Nulla vulputate sapien sit amet elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed nunc. In at ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut augue. Phasellus scelerisque vehicula orci.</div>
33.<div id="icerikAlt"><img src="images/icerik_alt.png" width="207" height="18" alt=" " /></div>
34.</div>
35.</div>
36.</body>
37.</html>
Linklerin Görülmesine İzin Verilmiyor.
Üye Ol ya da Giriş Yap
Alıntı