ロールオーバーをさせる際に、通常表示用とロールオーバー用の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％に戻しています。