• 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 BootCamp: Categories vs Tags

    WordPress BootCamp: Categories vs Tags

    Reading time: 2 minutes

    This is the second post of Mitch Canter’s “WordPress BootCamp” series… it showcases the ins and outs of WordPress to new users, and highlights some of the more popular (and some overlooked) features that make WordPress fantastic.  You can catch all of the posts here. I get a lot of questions on this: “What’s the…

    WordPress
  • Freshly Pressed: A Wild New Plugin Appears! Custom Classes

    Freshly Pressed: A Wild New Plugin Appears! Custom Classes

    Reading time: 1 minute

    From time to time I like to surf through the repository and try out new plugins.  It keeps me in the know and I’m able to share those plugins with you.  So, here’s what I found as I was surfing this fine Wednesday: Custom Classes Justin Tadlock is a man synonymous with great plugins, and his latest…

    WordPress