WEB/システム/IT技術ブログ

JavaScriptを使ってIE6でPNG画像を透過させる

私は透過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なんかなくなっちゃえー。

B!

Comment

コメントはありません

コメントする

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Monthly Archives