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なんかなくなっちゃえー。
コメントする