jQueryだけで画像のロールオーバーを実装する方法
ロールオーバーの為にわざわざプラグインを使うのは、あんまりシンプルじゃないかなと思い、色々探していた頃 テレパス・ラボ : 画像のロールオーバー に出会いました。
この記事を発見したのは1年以上も前ですが、この方法を紹介している記事をあまり見かけないので、改めてコチラでご紹介したいと思います。
以下で紹介するサンプルコードは、利便性向上の為やや改変されています。元ソースをご所望の方は テレパス・ラボ : 画像のロールオーバー を参照して下さい。
2009-03-25 プラグイン版も出来ました！
input要素にも使えるjQueryのロールオーバープラグイン
サンプルコード
コードを今のレベルに合わせて修正しました。
jQuery(document).ready(function($) {
var postfix = '_on';
$('#gNavi a img').not('[src*="'+ postfix +'."]').each(function() {
var img = $(this);
var src = img.attr('src');
var src_on = src.substr(0, src.lastIndexOf('.'))
+ postfix
+ src.substring(src.lastIndexOf('.'));
$('<img>').attr('src', src_on);
img.hover(
function() {
img.attr('src', src_on);
},
function() {
img.attr('src', src);
}
);
});
});
使い方
3行目で指定した箇所の画像にマウスポインタを当てると、ファイル名に_onが付いてる画像を表示する。マウスポインタを外すと_onが付いていない画像に戻る。
以下に実装までの簡単な流れを。
- 通常表示する画像 test.jpg とロールオーバーする画像 test_on.jpg を作成
- jQueryの設定を記述しているファイル(又はHTMLのscript内)に上記コードを挿入
- コード3行目の .rollover a img をCSSな記法で好きな場所に変える
こんな感じです。あら簡単。
※尚、今回ご紹介した方法は[inputにフォーカスすると消える文字をjQueryで実装する]と同様、他でjQueryを使用してる際の"おまけ"程度に考えて頂ければと思います。
オリジナルと違う点
3行目に .not("[src*='_on.']") を追加することで、src属性で指定した画像に_onが付いている場合はロールオーバーの処理を実行しないようにしています。これにより、アクティブページなどで初めから_on付きの画像を指定したい時も、IDやClassを指定する必要が無くなります。
0