【jQueryのプラグインを作ろう！】

第9回「画像を非表示にしよう」
＊これはascii.jpで連載した記事の続きです。このため、このページを読む前にあらかじめascii.jpで連載した記事をお読み下さい。

text : 古籏一浩

■画像を表示しない機能はあれど

　Operaなどのブラウザには画像表示しない機能などが用意されています。とにかく文章だけを読みたい、急いでいるから、ざっとテキスト情報だけ分かればよい、パケット代を節約したい（今は定額がほとんどですが）など、文字だけあればよいという事もあります。
　ただ、場合によっては不要な画像だけを消したい、特定の範囲だけ画像を消したいこともあります。ブラウザの機能ではページ内の全ての画像が見えなくなってしまい不便なこともあるかもしれません。また、スタイルシートではID名やクラス名が固定されてしまうため、他のサイトでは使えないなど汎用性に欠けます。そこで、今回は特定の範囲だけの画像を非表示にするプラグインを作成してみましょう。

■CSSのdisplay:noneで終わり

　今回は非常に簡単です。というのも画像を非表示にするだけなのでCSSのdisplayプロパティにnoneを設定すれば終わりだからです。jQueryではcss()メソッドを使って指定すればできあがりです。が、この時にfind()を使ってimgタグを抽出するようにします。これは、プラグインに与えられるのはセレクタで指定されたエレメント（タグ）だけなので、そこに内包されている子孫タグまでは影響が及ばないためです。そこでfind()を使って子孫までimgタグを検索し、表示しないようにします。
　それと、もう１つ背景画像も消しておきます。こちらは与えられたエレメントだけを非表示にします。CSSのbackground-imageにurl()で透明画像があるパスを指定します。え？透明画像のパスを指定するの？という人もいるでしょう。url()として何も指定しないとFirefoxでは背景画像は消えますが、SafariやOperaでは消えません。ではurl(dummy)として存在しないファイルパスを指定するとどうでしょうか。この場合、FirefoxとSafariでは背景画像が消えますが、Operaでは消えません。このため、透明画像を用意し、そのファイルパスを指定することでFirefox、Safari、Operaで背景画像が消える（消えたように見える）ようになります。

　完成したプラグインのソースは以下のようになります。

【プラグインのソース】

/* 画像非表示リンクプラグイン for jQuery
2009.2 By KaZuhiro FuRuhata  */
$.fn.hideImage = function(){
    $(this).find("img").css("display","none");
    $(this).css("background-image","url('images/none.gif')");
	return this;
}

■実際に使ってみよう

　それでは作成したプラグインを使ってみましょう。
　最初にjQueryライブラリファイルを読み込ませたあとにプラグインファイルを読み込ませます。

	<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
	<script type="text/javascript" src="js/hideimage.js"></script>

　次に画像を消したいimgタグを含む要素を$()のセレクタで指定します。

$("#sampleAlbum").hideImage();

　これで指定したエレメント内の画像だけが消えます（サンプルを実行する）。