【jQuery】画像一枚でロールオーバー

公開日

ロールオーバーをさせる際に、通常表示用とロールオーバー用の2枚の画像を用意するのは面倒ですよね。

画像の透過度をjQueryで操作することで、ロールオーバー的な表現が可能かなと思い検索したところ、「Fine×3」さんのサイトで分かりやすく紹介されていました。

方法は、特定のファイル名がついた画像をhoverイベントでマウスオーバー時とマウスアウト時の透過度を変更する形です。

以下、覚え書きです。

手順は、ロールオーバーさせる画像を用意し、ファイル名に「_btn.」を入れます。
Javascriptのソースは、下記になります。

[js]
$(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’);
});
}
}
});

[/js]

マウスオーバー時は画像の透過度を60%にし、マウスアウト時は透過度を100%に戻しています。

関連サイト
Fine×3さん記事 「画像1枚でロールオーバー」


関連記事