opacity image browser compatability

[dadamssg]

can anyone clear up what image files support transparency? and which browsers? i know the .png files do but i don't think they are displayed in IE6 and earlier. Can .gif's have transparency? i want to do rounded corners for my divs and trying to get an idea about which image file to use

[sKunKbad]

It is way better to use png files for your images that contain transparency, because pngs have an opacity value to the pixels, while gifs are either "on or off".

 

IE6 is the only recent browser to worry about when considering png transparency, but you can overcome this easily with a little javascript called supersleight

 

var supersleight	= function() {

var root = false;
var applyPositioning = true;

// Path to a transparent GIF image
var shim			= 'x.gif';

// RegExp to match above GIF image name
var shim_pattern	= /x\.gif$/i;



var fnLoadPngs = function() { 
	if (root) {
		root = document.getElementById(root);
	}else{
		root = document;
	}
	for (var i = root.all.length - 1, obj = null; (obj = root.all[i]); i--) {
		// background pngs
		if (obj.currentStyle.backgroundImage.match(/\.png/i) !== null) {
			bg_fnFixPng(obj);
		}
		// image elements
		if (obj.tagName=='IMG' && obj.src.match(/\.png$/i) !== null){
			el_fnFixPng(obj);
		}
		// apply position to 'active' elements
		if (applyPositioning && (obj.tagName=='A' || obj.tagName=='INPUT') && obj.style.position === ''){
			obj.style.position = 'relative';
		}
	}
};

var bg_fnFixPng = function(obj) {
	var mode = 'scale';
	var bg	= obj.currentStyle.backgroundImage;
	var src = bg.substring(5,bg.length-2);
	if (obj.currentStyle.backgroundRepeat == 'no-repeat') {
		mode = 'crop';
	}
	obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + mode + "')";
	obj.style.backgroundImage = 'url('+shim+')';
};

var el_fnFixPng = function(img) {
	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 = shim;
};

var addLoadEvent = function(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			if (oldonload) {
				oldonload();
			}
			func();
		};
	}
};

return {
	init: function() { 
		addLoadEvent(fnLoadPngs);
	},

	limitTo: function(el) {
		root = el;
	},

	run: function() {
		fnLoadPngs();
	}
};
}();

// limit to part of the page ... pass an ID to limitTo:
// supersleight.limitTo('header');

supersleight.init();

 

There is also a special gif image that makes this work, you can copy it from my site using the following link:

 

http://www.brianswebdesign.com/x.gif

 

It's only a 1 pixel gif, and that "page" will look blank, but the image is there.

[ToonMariner]

http://www.twinhelix.com/css/iepngfix/

 

javascript free methhod (has a few issues but on the whole very good).