一枚の画像でロールオーバー

画像一枚でロールオーバー | よく使うjQuery

ロールオーバーさせる為に画像を2枚用意するのが面倒という場合に使う方法です。以前もロールオーバーのサンプルを紹介しましたが、今回はjQueryを使って1枚の画像をロールオーバーっぽく見せる方法の紹介です。


画像一枚でロールオーバー
■html
<body>

<div id="sample">
<img src="images/aaa_btn.gif" />
<img src="images/bbb_btn.gif" />
<img src="images/ccc_btn.gif" />
<img src="images/ddd_btn.gif" />
</div>

</body>
■javascript
$(function() {
	var images = $("img");
	for(var i=0; i < images.size(); i++) {
		if(images.eq(i).attr("src").match("_btn.")) {
			$("img").eq(i).hover(function() {
				$(this).css('opacity', '0.6');
			}, function() {
				$(this).css('opacity', '1');
			});
		}
	}
});
解説

このロールオーバーの仕組みは、マウスオーバー時に画像の透過度を変えることでロールオーバーしているように見せています。
スクリプトの内容は、まず<img>タグを変数「images」に格納しfor文でimg要素の数だけループさせます。<img>タグの数はsize()で取得します。ここまでは前回のロールオーバーと同じです。

	var images = $("img");
	for(var i=0; i < images.size(); i++) {

ここからが今回のポイントとなる部分です。
画像ファイル名に「_btn.」があるものを対象とします。つまりロールオーバーさせる画像はファイル名に「_btn.」を入れる必要があります。
そしてhoverイベントでマウスオーバー時とマウスアウト時の透過度を設定します。

		if(images.eq(i).attr("src").match("_btn.")) {
			$("img").eq(i).hover(function() {
				$(this).css('opacity', '0.6');
			}, function() {
				$(this).css('opacity', '1');
			});
		}

上記ソースではマウスオーバー時は「$(this).css(‘opacity’, ‘0.6’);」、つまり60%にし、マウスアウト時は「$(this).css(‘opacity’, ‘1’);」で透過度を100%に戻しています。

もちろんロールオーバー対象を識別するファイル名や透過度の設定は任意で変更してかまいません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です