HTML、CSS、JavaScriptなどWebに悩む人のネタ帳です。

私は透過PNG画像は比較的使わないほうですが、要件であったり、何かしら使わなければならないケースが出てくることもあります。
しかし、IE6では透過されないという問題があります。


以下のように、対策としてCSSにAlphaImageLoaderを記述するのが主らしいですが、全ての画像のために記述するのもめんどくさいです。

.alpha{
	width: 100px;
	height: 100px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./image/sample.png', sizingMethod=scale);
}

そこで、拡張子がpngのものに対して上のスタイルを適応するJavaScriptを書いてみました。

function transPngIE6(){
	if(navigator.userAgent.match(/MSIE 6./)){
		var imgs = document.getElementsByTagName("img");
		for (var i = 0; i < imgs.length; i++) {
			var img = imgs[i];
			if (img.src && img.src.match(/.(png|PNG)$/i)) {
				var html = '<div style=""></div>';
				img.outerHTML = html;
			}
		}
	}
}

ただし、動作負荷は結構あるし、imgで設置した画像をdivタグの背景に書き換えるのはいかがなものかという問題もあります。
IE6なんかなくなっちゃえー。

このエントリーをはてなブックマークに追加

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Monthly Archives

Search