概要
Windows IE 5.5, 6.0で擬似的に png 画像の半透明部分を有効ににして表示するためのスクリプトです。
説明
ソース内に
<img src="sample.png" alt="sample" width="100" height="50" />
のように png ファイルを参照している img 要素があった場合、Web ブラウザがIEのときには自動で
<img src="altpng.gif" alt="sample" width="100" height="50" style=" filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="sample.png");" />
に置き換えるための JavaScript ライブラリです。
filter は IE 独自の CSS プロパティで、背景のようなものです。
使い方
ダウンロードした js ファイルを <head" 内などで読み込みます。
<script type="text/javascript" src="js/ie6png.js"></script>ie6png.gif というファイル名の透明の gif ファイルを png ファイルと同じディレクトリに置いてください。
以上です。
ソースコード
/*==================================================================================================== ////////////////////////////////////////////////////////////////////////////////////////////////////// Author : http://www.yomotsu.net created: 2006/12/20 update : 2009/08/21 Licensed under the GNU Lesser General Public License version 2.1 ////////////////////////////////////////////////////////////////////////////////////////////////////// ====================================================================================================*/ var yomotsuIePng = { main : function(){ if (document.uniqueID && typeof XMLHttpRequest == 'undefined'){ var img = document.images; for (var i = 0; i <img.length; i++) { if ((img[i].src.match(/.png$/))&&(!img[i].src.match(/google/))){ var pngSrc = img[i].src; var blankSrc = pngSrc.slice(0, pngSrc.lastIndexOf("/")+1) + "ie6png.gif"; img[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + pngSrc + "')"; img[i].src = blankSrc; } } } }, addEvent : function(){ try { window.addEventListener('load', yomotsuIePng.main, false); } catch (e) { window.attachEvent('onload', yomotsuIePng.main); } } } yomotsuIePng.addEvent();
トラックバックURI
http://www.yomotsu.net/lab/javascripts/ie6png/trackback
コメント
Halcaさんからのコメント
2010年2月4日 13:35
頂きました、ありがとうございます。
png24、背景にも使えると、感激なんですけど・・・・
コメントフォーム
実験室に戻る