• Home
  • About Mitch
  • Speaking
  • Articles
  • Contact
  • Home
  • About Mitch
  • Speaking
  • Articles
  • Contact

Digital Strategist

WordPress Developer

Content Creator

Unapologetic Punk

Mitch Canter

  • X
  • Bluesky
  • GitHub
  • Twitch
  • YouTube
  • LinkedIn
Technology

Transparent PNG in IE6 – JavaScript

CMDR Mitchcraft

Reading time: 1 minute

There are a lot of fixes for Alpha PNG transparancy in Internet Explorer 6.  They all have their pros and cons, but I love this one because (unlike some other fixes) it covers every image at once.  That way, you can put in a lot of transparent images and get a massive fix for all.

<!--[if gte IE 5.5000]>
<script language="JavaScript">
function correctPNG()
{
   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]-->

The only downside: any transparent parts of the image will not be clickable for hyperlink purposes.  If you have a white logo on a transparent background, for example, you can only click on the white parts, and not the image as a whole.

Alpha, Fix, JavaScript, PNG
  • WordPress 3.2: A First Look

    WordPress 3.2: A First Look

    Reading time: 2 minutes

    I’ve just downloaded a local copy of the brand spanking new WordPress 3.2beta1 – and let me be the first to say… it’s gorgeous. Simplicity is the motto here, and the UI design team has done an outstanding job in streamlining a lot of the elements down.  I mean, take a look at this new…

    WordPress
  • WordPress 3.4 Goes Green!

    WordPress 3.4 Goes Green!

    Reading time: 2 minutes

    …not like eco-friendly.  I mean, they’re already eco-friendly; a journal that doesn’t use paper? Can’t get any more green than that! No, it’s green like Grant Green, the incredible Jazz musician. Look below for the change list, taken from the official site: For Users The biggest change in 3.4 is the theme customizer which allows…

    WordPress