SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    will code HTML for food Michel V's Avatar
    Join Date
    Sep 2000
    Location
    Corsica
    Posts
    552
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A way to use PNG with alpha transparency in MSIE 5.5+

    Here's something that got me scratching my head for a long time: how could I make
    this PNG display in all the glory of its alpha transparency in Windows IE ?

    The answer is an ugly, yet functional hack that uses IE's filter: CSS attributes,
    and DirectX. It works with IE 5.5+, and degrades gracefully on other browsers since
    they ignore the filter: attributes.
    I came up with it after checking out some MSDN page.

    Code:
    <span style="width:(your image's width); height:(your image's height); filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yourimage.png');">
    
    <img src='yourimage.png' alt='image' style='filter:Alpha(opacity=0)' />
    
    </span>
    What it does is creating a span and loading the PNG with its alpha transparency as a
    background, then display the same PNG from the IMG tag without that alpha
    transparency, but since opacity=0 the IMG is not seen.
    This method requires you to know the width and height of yourimage.png, though.


    Example: header.png, width=50px, height=50px
    Code:
    <span style="width:50px; height:50px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='header.png');">
    
    <img src='header.png' alt='header' style='filter:Alpha(opacity=0)' />
    
    </span>

    I hope this helps :D
    Last edited by Michel V; Jul 11, 2002 at 09:21.

  2. #2
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Presumably you won't get multiple levels of transparency with this method.

    If you aren't then you still aren't getting it in *all* its glory.

    i.e. no fading, etc...


    Someone should jump on MS and get them to get their act together.
    You PC IE folk aren't getting the deal you should.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  3. #3
    will code HTML for food Michel V's Avatar
    Join Date
    Sep 2000
    Location
    Corsica
    Posts
    552
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://tidakada.com/stuff/test/toucan.html
    It works there, and on tidakada.com the title is a transparent PNG too

    Actually, it works with some images ( this toucan picture is the third toucan from there: http://www.libpng.org/pub/png/pngs-img-bg.html ), but not every PNG... I guess it's all about palettes and number of bits.

    The sure way I make PNG images work, is by creating the png under The GIMP, and save it with the option 'Interlacing', leaving all other options off and compressing to 9.

  4. #4
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In short, IE windows' PNG support is a pile of steaming dingo's kidneys. Sometimes it works, sometimes it doesn't. I coded up a site using plain PNGs throughout. No Alpha. Hell, no COLOURS, just black and white line art. IE5.5/6 showed some of them, but not others. Go figure.

    IE Mac, recent versions of Office, sundry other Microsoft products, all support PNG well, but IE windows drops the ball. Disgraceful. (Hey, Mac IE developers: do us all a favour and go beat your windows colleages with a clue-by-four)

    The GOOD news is that most of the other major browsers do much better - netscape 6, mozilla and its other siblings, opera, iCab and omniweb all do at least a passable job, and often nuch better.

    (check out http://www.libpng.org/pub/png/pngapbr.html for a list of many browsers and their support levels)

  5. #5
    SitePoint Zealot Taranis's Avatar
    Join Date
    Aug 2002
    Location
    Franklin, TN
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I recently built a site that makes extensive use of this "hack." The only problem I had was trying to do rollovers. It became a nightmare, but I slogged my way through it. If anyone can think of an elegant way to do rollovers while using this "hack," I would love to hear about it.

    My current solution is to simply show/hide another layer with the rollover effect image in it. That worked for the site I am talking about because the rollover was just a dot showing up beside the text. I am now working on another site and the entire image changes color and bolds, etc. so I can't use that show/hide layer workaround. Any ideas?

    I can't show either site to you know because they haven't been officially OK'ed by the client, but I will try to let you know, so that you can see this hack in action.

  6. #6
    SitePoint Guru sowen's Avatar
    Join Date
    Feb 2001
    Location
    Stockport, UK
    Posts
    729
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a neat bit of js. Drop into the HEAD and you can call your images as normal <img src="picy.png" /> Still won't make png rollovers work but I'm sure there must be a way.

    Code:
    if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
    	document.writeln('<style type="text/css">img { visibility:hidden; } </style>');
    	window.attachEvent("onload", fnLoadPngs);
    }
    
    function fnLoadPngs() {
    	var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
    	var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
    
    	for (var i = document.images.length - 1, img = null; (img = document.images[i]); i--) {
    		if (itsAllGood && img.src.match(/\.png$/i) != null) {
    			var src = img.src;
    			img.style.width = img.width + "px";
    			img.style.height = img.height + "px";
    			img.style.filter = "progid: DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')"
    			img.src = "spacer.gif";
    		}
    		img.style.visibility = "visible";
    	}
    }
    *note. when I dig out where I got this from I'll post the credit cause it's far to clever for me!

  7. #7
    SitePoint Zealot Taranis's Avatar
    Join Date
    Aug 2002
    Location
    Franklin, TN
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Man, I thought that JavaScript was the answer, but it caused some really strange things to happen to my page.

    It was weird. Nothing would show up and the whole page would be black. The images would show up if I put my mouse over them. It was bizarre.

    Any ideas.

  8. #8
    SitePoint Guru sowen's Avatar
    Join Date
    Feb 2001
    Location
    Stockport, UK
    Posts
    729
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I forgot to mention that spacer.gif should be a 1x1 transparent gif and you need to enter the correct path to it, so if you have an images folder:
    Code:
    <script language="JavaScript" type="text/javascript">
    
    if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
    	document.writeln('<style type="text/css">img { visibility:hidden; } </style>');
    	window.attachEvent("onload", fnLoadPngs);
    }
    
    function fnLoadPngs() {
    	var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
    	var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
    
    	for (var i = document.images.length - 1, img = null; (img = document.images[i]); i--) {
    		if (itsAllGood && img.src.match(/\.png$/i) != null) {
    			var src = img.src;
    			img.style.width = img.width + "px";
    			img.style.height = img.height + "px";
    			img.style.filter = "progid: DXImageTransform.Microsoft.AlphaImageLoader(src='" 
    + src + "', sizingMethod='scale')"
    			img.src = "images/spacer.gif";
    		}
    		img.style.visibility = "visible";
    	}
    }
    
    </script>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •