////////////////////////////////////////////////////////////////////////////////////////////////// // // Windows版 IE5.5以上6.x以下のバージョンでPNGファイルのアルファチャンネルを機能させるスクリプト // // 使い方: // // // 透過処理が適用されるもの: // * src属性にpng画像が指定されているimg要素 // * src属性にpng画像が指定されているinput要素 // * スタイルシートのbackgroundプロパティにpng画像が指定されていて、 // かつbackground-repeatプロパティがno-repeatのもの。 // * hoverでも透過する場合に差し替えている ////////////////////////////////////////////////////////////////////////////////////////////////// // blank.gifの場所を指定 var blank_gif = "images/blank.gif"; // メイン処理 function transparent_png() { if (!check_browser()) { return; } change_png("img"); change_png("input"); // スタイルシート内のpng透過処理(IE専用) for (var i = 0; i < document.getElementsByTagName('*').length; i++) { var obj = document.getElementsByTagName('*')[i]; var obj_bg = obj.currentStyle.backgroundImage; if (obj_bg != "none" && obj_bg.match(/\.png"\)$/) && obj.currentStyle.backgroundRepeat == "no-repeat") { image = obj_bg.replace(/(url\("|"\))/g, ""); obj.style.backgroundImage = "url('" + blank_gif + "')"; obj.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + image + "', sizingmethod='crop');"; } } // idが"mnu_"で始まる部分にhover補正(IE専用) var objA = document.getElementsByTagName('A'); for (var j = 0; j < objA.length; j++) { if (objA[j].id.substring(0, 4) == "mnu_") { objA[j].onmouseover = change_png_mouseover; objA[j].onmouseout = change_png_mouseout; } } } // スタイルシートでhoverが指定されている場合に差し替える(IE専用) function change_png_mouseover() { if (this.runtimeStyle.filter.indexOf("_c.png") < 0) { var filter = this.runtimeStyle.filter.replace(".png", "_a.png"); this.runtimeStyle.filter = filter; } } // スタイルシートでhoverが指定されている場合に差し替えたものを元に戻す(IE専用) function change_png_mouseout() { if (this.runtimeStyle.filter.indexOf("_c.png") < 0) { var filter = this.runtimeStyle.filter.replace("_a.png", ".png"); this.runtimeStyle.filter = filter; } } // tag_nameで与えられたタグのsrc要素のpng透過処理(IE専用) function change_png(tag_name) { var obj = document.getElementsByTagName(tag_name); var image = new Array(); for (var i = 0; i < obj.length; i++) { image = obj[i].src; if (image.match(/\.png$/)) { obj[i].src = blank_gif; obj[i].runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + image + '", sizingmethod="image");'; } } } // ブラウザーバージョンチェック(WinIE6.x以下でTrue、それ以外のブラウザーではFalseを返す) function check_browser() { if (navigator.platform.substring(0, 3) == "Win" && navigator.appName == "Microsoft Internet Explorer") { var bver = navigator.appVersion; bver = bver.substr(bver.indexOf("MSIE ") + 5, bver.indexOf("; ", bver.indexOf("MSIE ")) - (bver.indexOf("MSIE ") + 5)); if (eval(bver) < 7) { return true; } } return false; }