Subhishine Area

Ok.. kembali lagi ke subhishine tutorial series..
Kali ini kita akan mempelajari bagaimana memperbaiki transparansi PNG di Internet Explorer 6. OK..kita permudah saja dengan pertanyaan-pertanyaan mendasar:

Apa hebatnya sih PNG?..
Salah satu kelebihan PNG dibanding tipe lainnya adalah PNG mendukung transparansi, dan memiliki gambar tepian transparansi yang lebih halus dibandingkan GIF.

Mengapa mesti menggunakan transparansi?..
Transparansi pada web design biasanya diminati untuk gambar-gambar yang memiliki drop-shadow di tepinya.
Transparansi juga diminati untuk gambar tanpa background (dihilangkan background-nya).

Ngapain ngurusin IE6?..kan sudah banyak browser baru..
Eittsss...jangan salah.. sebagai web designer kita harus memikirkan kompatibilitas design kita terhadap semua jenis browser.
Masih suka pergi ke warnet?.. umumnya warnet menggunakan windows XP, dan IE6 adalah bawaan windows XP. Berarti kemungkinan penggunaan IE6 untuk membuka internet masih banyak. Apalagi untuk orang yang taunya internetan cuma pake IE..wahh bahaya.. web yang kita buat bisa keliatan jelek/berantakan kalau kita mengesampingkan masalah kompatibilitas browser. 

Apa masalahnya di IE6?..
Ayo kita lihat gambar di bawah ini:
 

Gambar kiri adalah gambar PNG yang ditampilkan di browser-browser terbaru, sedangkan gambar kanan terjadi bila ditampikan pada IE6.

Gambar berikut ini adalah css dan html yang saya gunakan untuk gambar di atas:

CSS-nya


HTML-nya 

Loh kok gambar PNG-nya jadi ada kotak putihnya?..
Iya laahh..karena IE6 tidak bisa merender transparansi PNG dengan baik.
Nahh..di sini kita perlu memperbaikinya..Ayo kita mulai.. 

Sebenarnya banyak sekali tehnik memperbaiki PNG, namun di sini saya hanya memperkenalkan salah satu yang terbaik dari yang pernah saya coba (bila ada tehnik yang lebih baik, monggo silahkan..).

Langkah 1.
Dalam tehnik ini kita akan menggunakan javascript. Tenang aja..javascriptnya sudah ada kok, tinggal download aja di sini. (klik aja tulisan "di sini" lalu save, atau klik kanan tulisan "di sini" lalu save target as).
Letakkan javascript-nya di folder web kamu.

Langkah 2.
Tambahkan script berikut di bagian HEAD website kamu.

Tulisan highlight kuning head-nya jangan ikut di tulis ya.. itu saya cuma nunjukkin kalo naronya di bagian head.

Penjelasan script:
Tulisan if lt IE 7 itu maksudnya script tersebut hanya dijalankan kalau terdeteksi browser adalah versi IE dibawah IE 7. (lt=lower than, atau less than)

Highlight kuning yang pertama tu sesuaikan dengan lokasi javascript tadi di folder web kamu.
Highlight kuning yang kedua tu daftar yang akan diperbaiki, bisa berupa tag-html, atau class.

Coba liat lagi html yang saya pake, saya buat div dengan class logo yang berisi background gambar PNG. Karena gambar PNG-nya ada di dalam css-nya div, maka yang ditulis dalam DD_belated.fix adalah div.
 

Test buka pake IE6, Hasilnya:

Wah..gambar satunya masih ada kotak putihnya tuh..
Itu karena tag img belum kita masukkan dalam daftar yang diperbaiki. Ayo coba kita tambahkan..jadi seperti di bawah ini:
 

Test buka pake IE6, hasilnya:

Saatnya saya untuk bilang "SEMPURNA..."(sambil muterin jari tangan..ala demian..) ^_^

Ehm.. itu tadi contoh kalo daftarnya pake tag, kalo pake class gimana?..ya tulis aja classnya di daftarnya. Lihat gambar di bawah:

Naahh..liat gambar atas deh.. disitu div saya ganti sama class logo, nulisnya pake [titik]logo.

Kapan pake class kapan pake div sih?..
Kalo pake class tuh kalo gambar PNG-nya ada di dalem css, dan kalo pake class jadi lebih spesifik ke tag yang pake class tertentu. Gitu aja sih..

Naaahh temanss...sudah pada ngerti belum?..bisa kan?..coba deh praktek sendiri..kalo ga pernah dicoba..kapan mo ngerti n bisa?..ayolah..coba praktekin..

versi cetak