the.sandalian.com 

dan Yeni Setiawan pun menulis dengan penuh sukacita.. 

Transparasi file PNG di Internet Explorer

02 Aug 2007 04:54:07 WIB,under category Web Dev (840 views)

Untuk gambar yang mengandung bidang transparan, umumnya kita menggunakan file gambar berformat GIF. Namun sayangnya GIF hanya bisa transparan saat berada di atas satu warna yang solid. Ketika berada di atas dua warna atau gradien, GIF akan meninggalkan halo seperti bercak-bercak yang tidak sedap dipandang.

Untuk mengatasi hal ini, kita bisa beralih ke file PNG yang lebih ampuh untuk gambar yang mengandung transparansi. Namun sayangnya, Internet Explorer tidak mendukung transparansi PNG, duh! Alih-alih transparan, malah akan muncul warna aneh yang tentu saja akan menghancurkan desain.

Sudah lama saya mengetahui bahwa penyakit ini bisa disembuhkan dengan javascript, namun baru sekarang menyempatkan diri mencari obatnya setelah tadi kangdiman bertanya kepada saya. Ok berikut ini obatnya:


<!--[if IE]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
   var arVersion = navigator.appVersion.split("MSIE")
   var version = parseFloat(arVersion[1])
   if ((version >= 5.5) && (document.body.filters)) 
   {
      for(var i=0; i<document.images.length; i++)
      {
         var img = document.images[i]
         var imgName = img.src.toUpperCase()
         if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
         {
            var imgID = (img.id) ? "id='" + img.id + "' " : ""
            var imgClass = (img.className) ? "class='" + img.className + "' " : ""
            var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
            var imgStyle = "display:inline-block;" + img.style.cssText 
            if (img.align == "left") imgStyle = "float:left;" + imgStyle
            if (img.align == "right") imgStyle = "float:right;" + imgStyle
            if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
            var strNewHTML = "<span " + imgID + imgClass + imgTitle
            + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
            + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
            + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
            img.outerHTML = strNewHTML
            i = i-1
         }
      }
   }    
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->

Script tersebut diapit dalam IF tujuannya adalah agar hanya dijalankan saat dibuka menggunakan Internet Explorer. Eh ngomong-ngomong, sandal saya di bawah masih jelek yah di IE ^o^

15 comment

Comment

  1. ayahshiva
    02 Aug 2007 07:54:01
    wah jago photoshop juga.
    btw kok IE bermasalah hampir dengan semua ya
     
  2. Yeni Setiawan
    02 Aug 2007 10:58:08
    waduh, saya ga pinter potosop mas.
    sual gif ato png, itu kan pengetahuan dasar utk jadi tukang mbikin web ^_^
     
  3. gemblungan gemblung
    02 Aug 2007 13:00:45
    Solusinya nggak usah lagi pake ie 5 dan 6, la wong pake lynx saja bisa...hehehhe
    dik script2 tadi bisa di gemblungan dadi gemblung tenan..kekekeke

    ada yang aneh nggak ;))
    selamat bergemblungan gemblung : http://homepage.ntlworld.com/bobosola/pnghowto.htm
     
  4. funkshit
    02 Aug 2007 23:20:34
    uda lama ngga make IE
    tadi nyoba buka Web ini pake IE 6
    pas halaman ini menunya jumpalitan ra toto loh :D
    sandalnya juga ada backgroundnya
     
  5. mbah darmo
    02 Aug 2007 23:54:13
    :D.. saya harus komen ah..
     
  6. rd Limosin
    03 Aug 2007 00:14:20
    wah, keren....

    Klo ttg sandal dibawah, gak pernah liat pake IE, idup Perpok!!!!!
     
  7. Yeni Setiawan
    03 Aug 2007 01:20:48
    @kangdiman gemblung
    he he iya, lupa ngasih backlink ke sumber asal. script di atas berasal dari sini.
     
  8. Yogi
    03 Aug 2007 04:12:49
    Gw biasanya pake IEPNGFix
    http://www.twinhelix.com/cgi-bin/forum.pl/iepngfix/101
     
  9. pupungbp
    04 Aug 2007 03:46:34
    Belum ada yang benar2 sempurna hack/scriptnya... mendingan jangan pakai alpha transparenscy :D
     
  10. Yeni Setiawan
    04 Aug 2007 05:29:56
    eh ada mas pupung :D
    iya sih, saya juga menghindari transparansi, cuma kadang dapet dari temen kayak gitu :D
     
  11. didats
    08 Aug 2007 03:49:42
    bener kata mas pupung,
    belum ada yang sempurna banget...

    tapi dari pada kepanjangan kayak di atas,
    mending pake jquery... :D
     
  12. Yeni Setiawan
    09 Aug 2007 00:22:04
    @didats
    lha kalo pake jquery bukannya malah puanjang?
     
  13. didats
    12 Aug 2007 05:32:41
    #12 kagag tuh.
    http://khurshid.com/jquery/iepnghack/
     
  14. husni
    22 Aug 2007 12:11:00
    Kutipan:
    Untuk mengatasi hal ini, kita bisa beralih ke file PNG yang lebih ampuh untuk gambar yang mengandung transparansi. Namun sayangnya, Internet Explorer tidak mendukung transparansi GIF, duh!
    Tanggapan:
    » mas sandal, itu yang bener GIF atau PNG ???
     
  15. Yeni Setiawan
    22 Aug 2007 12:36:40
    @mas husni
    oh,salah tulis mas. segera diedit. thanks.
     
 
Name
Email « Gravatarized
Homepage
preview
Blog ini mendukung gerakan "NO NOFOLLOW" V^_^

HTML tags allowed: <a> <u> <b> <i> <s> <sub> <sup>