シンプルな画像置換

<img src=hunberg.jpg alt=好きな食べ物はハンバーグ>

のようなソースの代わりに、

<h2>好きな食べ物はハンバーグ<h2>

と書いて画像で表示させるようにするためのjQueryスクリプト。

実際は、

<h2 class=image-replace src=hunberg.jpg width=200 height=150>好きな食べ物はハンバーグ<h2>

のようにh2タグにsrc、width、height属性も書いておく。

$(document).ready(function(){
	$('.image-replace').each(function(){
		var t=$(this).text();
		var s=$(this).attr("src");
		var w=$(this).attr("width");
		var h=$(this).attr("height");
		var i=$(this).attr("id");
		var c=$(this).attr("class");
		/*var tg=$(this).get(0).tagName;*/
		/*$(this).replaceWith("<img id='"+ i + "' tagname='" + tg +"' class='" + c + "' src='" + s + "' alt='" + t + "' />");*/
		$(this).replaceWith("<img id='"+ i + "' class='" + c + "' src='" + s +  "' width='" + w + "' height='" + h + "' alt='" + t + "' />");
	});
});

何かの都合でオリジナルのidやclass名（tag名も？）を置き換わったimgタグのアトリビュートとして残しておくと後で役に立つかもしれない。

実はto-Rさんの作られた「一番簡単な画像置換の方法-imageReplace.js-」
http://blog.webcreativepark.net/2007/02/22-011041.html

を使ってみたのだが、他のスライダーなどのjQuery Pluginと同時に使ったとき、widthとheight属性が消えているので、レイアウト崩れを起こしたので、稚拙だがこんなスクリプトを書いてみた。

サンプル
http://qitailang.small.jp/template/kappou/menu.html

hoverの画像置換には対応していない。