jQueryを使ってみよう その2

前回はjQueryのDOMオブジェクトの参照について中途半端にエントリーしましたが、続きを書く前に、実践的な使用例をご紹介してみようと思います。これは自社サイトのリニューアルの際に、SEOキーワードのテキストを、クライアント側で動的に画像として表示させるという仕組みを、jQueryで実装したものです。

phpみたく画像をサーバサイドでダイナミックに生成するのではないのでご注意を。画像は予め用意しておきます。どういうことかと言いますと、例えば、

<h1 class="replace" id="hoge-100-50-jpg">Flash CS3</h1>

と書くと、

<h1 class="replace" id="hoge-100-50-jpg">
	<img src="/images/hoge.jpg" width="100" height="50" alt="Flash CS3" />
</h1>

のように変換されます。

ソースはこんな感じです。

window.onload = function(){
	replaceTxtWithImg();
}

function replaceTxtWithImg(){
	var obj = $('.replace');
	if (obj.length == 0) return;
	$(obj).each(function(i){
		var id = $(this).attr('id');
		var arr = id.split("-");
		var len = arr.length;
		var extension = "." + arr[len - 1];
		var imgName = "";
		for (var i=0; i<len-3; i++){
			imgName += arr[i] + "-";
		}
		imgName = imgName.substr(0, imgName.length - 1);
		var img = '<img src="/images/' + imgName + extension + 
			'" width="' + arr[len - 3] + '" height="' + arr[len - 2] + 
			'" alt="' + $(this).html() + '" />';
		$(this).empty().prepend(img);
	});
}

このようにすると、replaceというクラス名の要素は全て、ダイナミックに画像に変換されるようになります。その際idには[画像名][width][height][拡張子]を-（ハイフン）でつなげたものを記述してください。（画像名にハイフンが入っていても大丈夫です。）

初期関数として呼び出すときは、本当は以下のような書き方のほうがベターなのですが、今回のサンプルでは、どうもWin IE6でページをリロードした際に、変換処理がうまくされない（関数がトリガーされてない？）っぽいので、普通にwindow.onloadから呼び出しています。

$(function(){
	replaceTxtWithImg();
});

要素内のテキストは画像のalt属性に入るようになっています。Google等のスパイダーが見るhtmlはjs変換前のものだと思うので、SEO的には有利なのではないかと思います。が、シンプルなテキストが、画像のaltよりもSEO的にウェイトが高いかどうかは微妙なところなので、試される方は自己責任でお願いしますー。

また、この例ではimagesフォルダをルート参照するようにしているので、適宜ディレクトリ名やパスを書き換えてお使いください。

[2007/07/26追記]
画像のalt属性を

$(this).html()

で取得していましたが、

$(this).text()

で取得したほうがマッチベターでした。ごめんなさい。