Destination Weddingwelcome Letter

jquery.pngFix.js PNG Transparency for Windows IE 5.5 & 6

jquery.pngFix . js
PNG-Transparency for Windows IE 5.5 & 6

This plugin will fix the missing PNG-Transparency in Windows Internet Explorer 5.5 & 6.

Features

• unobtrusive script, simple to setup


• works now also with CSS-Backgrounds (but scaling backgrounds)


• works with PNG-Images within Links


• TITLE, ALT, CLASS and STYLE-Attributes are considered

This page uses jQuery Version 1.3.2

Version 1.1, 2007-09-11
Tested on Windows XP SP2 with
- IE 5.5 + 6 + 7

Download

E x a m p l e s:

   PNG with transparency 
 
  
 
        src  =  "pngtest.png"     width  =  "173"     height  =  "173"     alt  =  "This is the alt-Text"     />          

   PNG with TITLE-Attribute 
 
  
 
         src  =  "pngtest.png"     width  =  "173"     height  =  "173"     
 
     title  =  "This is the title-Text"     alt  =  "This is the alt-Text"     />          

   PNG within a link 
  
  
 
        href  =  "#"     onclick  =  "alert('click');return false;"    >   
 
            src  =  "pngtest.png"     width  =  "173"     height  =  "173"     
 
         title  =  "This is the title-Text"      alt  =  "This is the alt-Text"     />   
 
                 

   PNG within a link and a STYLE-Attribute 
 
  
 
        href  =  "#"     onclick  =  "alert('click');return false;"    >    
 
            src  =  "pngtest.png"     width  =  "173"     height  =  "173"     
 
         style  =  "border:1.0em dashed #090;padding:10px;margin:10px;"     
 
         title   = "This is the title-text"   alt =   "This is the alt-text"   />  
        

  Div with PNG background via CSS 
 
   >  
    style =   " float: left; width: 173px; height: 173px; 
 background: url (pngtest.png); " >  
 This is a div-Container using a png as background ... 
        


style = "float: right; width: 346px; height: 346px;
background: white url (pngtest.png);" >
This is a div-Container using a png as background ...

 style = "clear:both;" >
 

This is a div-Container using a png as background ...

This is a div-Container using a png as background ...

   Input with PNG-Source 
 
  
 
       >   
 
        type  =  "image"     src   =  "pngtest.png"     width  =  "173"     height  =  "173"     />   
 
                 

How to use jquery.pngFix.js

1.
Download jQuery  
Download pngFix.zip   View Source
2.
Add jQuery and pngFix to the HEAD-Section of your HTML ...

         >   
 
 ... 
 
        type  =  "text/javascript"     src  =  "jquery-latest.pack.js"    >       
 
        type  =  "text/javascript"     src  =  "jquery.pngFix.js"    >       
 
 ... 
 
                    

3.
Activate pngFix on document.ready

    
 
 ... 
 
   "text/javascript"> 
 
     $(  document  ).ready(  function  (){ 
 
         $(  document  ).pngFix(); 
 
     }); 
 
  
 
 ...      

Test PNG (without transparency in IE 5.5 & 6)

above switch to PNG transparency