今回はWEB制作のちょっとしたギミックとしてMac OS XのExposeのように、特定の要素だけを目立たせてその他はハイライト効果をあたえるプラグイン「jQuery Tools Expose」を紹介いたします。指定箇所以外の部分をハイライトさせる効果はLightboxなどで見慣れていますが、ページ内でも同様な効果をあたえる事ができるので使い方によっては面白い効果が期待できます。

❶ スクリプトをダウンロード
EXPOSEからtools.expose-1.0.5.js
jQUERYからjquery.js

❷ スクリプトを読み込みます。

<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="tools.expose-1.0.2.js" type="text/javascript"></script>

❸ Exposeの初期設定を行ないます。
「jQuery Tools Expose」プラグインを読み込んだスクリプトタグの下に以下の様なスクリプトタグを挿入して、Exposeの初期設定をいたします。
スクリプトはidが「expose」の要素にたいして効果を与えています。

<script type="text/javascript">
(function($){
	$(document).ready(function(){
		$("#expose").expose({
				color : "#000", //ハイライト時の背景色
				opacity : 0.7, //ハイライト時の背景の透明度
				loadSpeed : 1000, //ハイライトの表示速度
				closeSpeed: 600, //ハイライトの閉じる速度
				maskId : "exposeMask", //ハイライトのマスクのid
				api: true
		});
		
		$("#expose").hover(function(){
				$(this).expose().load();
		},function(){
				$(this).expose().close();
		});
	});
})(jQuery)
</script>

❹ ハイライトで表示されるマスクを設定します
3で、maskId : “exposeMask”と指定したIDはハイライトが実行された時に裏側に表示されるオーバーレイのidとなります。このidに対してマスク画像を背景としてCSSで設定します。背景にする画像は大きめの透過PNGのグラデーションがいいでしょう。
CSS内

#exposeMask{
	background:#000 url(../img/mask_gradient.png) no-repeat 50% 50%;
}