Salah satu masalah yang sering ditemui ketika kita mendesain satu layout adalah cross-bowser check, terutama untuk “browser kesayangan” para desainer yakni Internet Explorer 5, dan 6. IE memang kini sudah merilis versi 8 dan relatif lebih “bersahabat” ketimbang para pendahulunya. Namun, kita tidak bisa menafikan begitu saja para pengunjung yang masih menggunakan versi 5.5 dan 6.
Salah satu “kemahiwalan” IE 5.5 dan 6 adalah dalam hal me-render file .PNG transparan. File tersebut latarnya akan terlihat berwarna abu-abu. Tentu ini terasa sangat annoying mengingat transparansi file .PNG begitu smooth dan mendukung opacity transparency.
Tapi jangan kuatir, sekarang ini sudah banyak beberapa trik/hack yang dapat digunakan untuk mensiasati hal tersebut. Salah satunya adalah dengan menggunakan jquery.pngFix.js. Berikut contoh penggunaan jquery.pngFix.js untuk mengatasi masalah transparansi file .PNG di IE 5.5 dan 6 (saya menggunakan jQuery versi 1.3.2 untuk blog ini):
PNG Transparan
<img src="contohpng.png" alt="Contoh PNG" width="128" height="128">
PNG Transparan Dengan Style
<img style="border:1.0em dashed #090;padding:10px;margin:10px;" src="contohpng.png" width="128" height="128" alt="Contoh PNG" />
DIV dengan Background PNG
<div><div style="float:left;width:128px;height:128px; background: url(contohpng.png);">Ini adalah div-container dengan menggunakan background PNG...</div><div style="float:right;width:346px;height:150px; background: white url(contohpng.png);">Ini adalah div-container dengan menggunakan background PNG...</div><div style="clear:both;"></div></div>
Khusus untuk implementasi pada DIV, width dan height image akan mengikuti width dan height yang di-state di style yang kita gunakan. Jadi, sebaiknya gunakan width dan height yang sesuai dengan dimensi image-nya.
Bagaimana Menggunakannya?
- Download jQuery
Download pngFix.zip atau lihat source. - Tambahkan tag untuk memanggil jQuery and pngFix pada bagian HEAD di dokumen HTML anda…
<head> ... <script type="text/javascript" src="jquery-latest.pack.js"></script> <script type="text/javascript" src="jquery.pngFix.js"></script> ... </head>
Sesuaikan path tempat file .js tadi diunggah.
- Aktifkan pngFix dengan menambahkan tag berikut:
<head> ... ... </head>
Selamat mencoba…
Wah iya mas…. aku juga coba pake png, tampilan di IE nya jelek banget. thx tips nya
oi ban, pngfix ada kelemahannya, emang gunanya menutupi kelemahan transparansi png di ie6 tapi kelemahan penggunaan png fix itu gak bisa pake repeat di background yang menggunakan png, soalnya yang keluar jadi 1 gambar aja, soalnya kadang suka menghilangkan repeat nya.. jadi kalo pake pngfix, diusahakan gak ada repeat background dengan png.
@Rafee: iya emang, gak bisa dipake repeat hehehe… makanya gw selalu mengusahakan pake image jpg or gif untuk background image hehehe…. thx Rafee