WebTecNote

[mootools] 透過PNGをIE6で自動的に表示させる　pingfix.js clone

Tenderfeel

必要に迫られて作ったIE Pingfix.jsのクローン
ページ内にある透過PNG形式画像をIEでも表示させるプラグインのmootools版です。
透過画像やAlphaImageLoaderについてはこっちの記事で詳しく書いてます→透過PNGと透過フィルターの使い方

適用する画像の判別はファイル名で行います。
背景は面倒なので未対応ですが、要素IDによる範囲指定が可能です。

やってる事は大体同じ

  1. 透過する画像を取得
  2. 画像の属性を取得(width,height,alt,src,class,id等)
  3. 新しい要素を作成（このクラスではspan）
  4. 作成した要素に画像の属性を当てる
  5. Style属性で作った要素をスタイリング（AlphaImageLoaderはここ）
  6. img要素を削除またはdisplay:noneにして作成した要素を挿入

Usage

このスクリプトはmootools ver1.2のプラグインです。
動作にはmootoolsのコアファイルが必要です。» Download

ヘッダでmootoolsとクラスのjsファイルを読み込んだ後、
domready内でクラスのインスタンスをnewで作ります。

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="moopingfix.js"></script>
<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
	new mooPingfix();
});
//]]>
</script>

ブラウザのバージョン判断はクラスが勝手にやりますが、上のdomreadyをクラスファイル内に書いて条件分岐させてもおｋ。

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="moopingfix.js"></script>
<![endif]-->

フィルターを適用するpng画像の名前の拡張子前にfixをつけて、「fix.png」としてください。
例：dog-fix.png hoge_fix.png　moofix.png
この名前を持つ画像のみfilterを適用します。imgタグのwithとheight属性は必須です。
alt属性は必須ではないですが、なるべくつけてください。

Class

new mooPingfix([{options}]);

デフォルトはbodyタグ内全てです。

Options

以下はデフォルト値です。

options: {
	areaID:null
}
[ダウンロードが見つかりません]

修正版

v1.2
親がposition:absoluteとかrelativeとかだったりして、リンク貼ってある透過png画像にフィルタ使うとリンクが機能しなくなることがあるんですが、それを解決しようと色々アレコレしてみた。

var mooPingfix = new Class({
	
	Implements: [Options],

	options: {
		areaID:null,
		spacerImg:"images/blank.gif"
	},
	initialize: function(options) {
		if(Browser.Engine.trident && Browser.Engine.version < 5){
			this.setOptions(options);
			if(this.options.areaID !== null) this.area = $(this.options.areaID);
			else this.area = $(document.body);
			this.pings = null;
			this.spacer = this.options.spacerImg;
			this.getPings();
			if(this.pings) this.createFix();
		}
	},
	getPings:function(){
		this.pings = this.area.getElements("img").filter(function(el,index){
			if(el.getProperty("src").test("fix.png")){return el;}else{return null;}
		});
	},
	createFix:function(){
		this.pings.each(function(el,index){
			var parent = el.getParents().reverse();
			var pa = parent[parent.length-1];
			var Props = el.getProperties('src','alt','width','height',"Class","id");
			el.setProperty("src",this.spacer);
			el.setStyle("filter","progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+Props.src+"', sizingMethod='scale')");
			
			if(pa.tagName=="A"){
				for (i = 0; i < parent.length; i++) {
					if(parent[i].getStyle("position")!="static" && parent[i].tagName!="BODY" && parent[i].tagName!="HTML"){
						parent=parent[i];
					}
				}
				var copy = el.clone();
				copy.setStyles({
					"display":"block",
					"cursor":"pointer",
					"width":Props.width+"px",
					"height":Props.height+"px",
					"position":"absolute",
					"z-index":"50",
					"left":el.getPosition(parent).x,
					"top":el.getPosition(parent).y
				});
				copy.addEvent("click",function(){
					location.href = pa.href;
				});
				copy.inject(parent);
			}
		},this);
	}
});

複製作って上に被せてるだけなんだけど
なんかもうブラウザ変更促す方が手っ取り早い気がする…

モバイルバージョンを終了