Webmaster Forum

Go Back   Webmaster Forum > Webmaster Discussion Forums > Web Design and Graphics

Notices

Reply
 
LinkBack Thread Tools Display Modes
Old 07-15-2008, 04:14 AM   #1
Regular Member
 
Aziz's Avatar
 
Join Date: May 2008
Location: Haifa, Israel
Posts: 630
My Mood:
Credits: 1
Aziz is a jewel in the roughAziz is a jewel in the rough
Send a message via MSN to Aziz
Lightbulb Javascript to fix IE7 and below PNG's Transperency!

Javascript to fix IE7 and below PNG'S Transperency

yea that's right! I found a javascript that fixes the PNG images on IE's previous versions

the source code:


Code:
/*

Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

*/

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
      }
   }
}
How to make it work?
  1. Copy paste the source code into notepad / or any editor
  2. save as "pngfix.js"
  3. as written add this to the <HEAD> Section
    HTML Code:
    <!--[if lt IE 7]>[*]<script defer type="text/javascript" src="pngfix.js"></script>[*]<![endif]--> 
  4. save the HTML document or whatever page you want to add the script to.

Credits to PNG in Windows IE
__________________
http://www.azizgfx.com/
Aziz is offline   Reply With Quote
Reply

Bookmarks

Tags
pgn ie fix transp js

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On



vBCredits v1.4 Copyright ©2007 - 2008, PixelFX Studios