About

jQueryでロールオーバーを実装する2つの方法

Share on FriendFeed
[`tweetmeme` not found]

世界中のakiファンの皆様、おはようございます。
今回はjQueryで画像のロールオーバーをする方法をまとめました。

今日先輩に「え?akiその方法でやってんの?ださくね?」といわれたのが悔しかったので忘備録です。

その1:「on」と「off」とついた画像を勝手に差し替える

私この方法を知らなかったんですよ。。。
今まで切り替えたい画像にクラスをいちいちつけていたのですが、onって名前に付ける画像はおおよそロールオーバーさせたい画像なので、全自動にしてしまっても問題ないですね。

サンプルおいておきます。

var images = $("img");
for(var i=0; i < images.size(); i++) {
    if(images.eq(i).attr("src").match("_off.")) {
        $("img").eq(i).hover(function() {
            $(this).attr('src', $(this).attr("src").replace("_off.", "_on."));
        }, function() {
            $(this).attr('src', $(this).attr("src").replace("_on.", "_off."));
        });
    }
}	
	

このソースを置いておいて、「ロールオーバー前の画像の拡張子の前に"_off"」を、ロールオーバー後の画像に「_on」を付けておくと自動でしてくれます。

その2:クラスを追加して指定する

今更感もあるのですが、1枚だけロールオーバーしたいという場合もあると思いますので念のため。

サンプルおいておきます。

$('img.hover').hover(function(){
		$(this).attr('src', $(this).attr('src').replace('_off', '_on'));
}, function(){
	if (!$(this).hasClass('currentPage')) {
		$(this).attr('src', $(this).attr('src').replace('_on', '_off'));
	}
});
	

こっちの場合は、指定したクラスを付けた画像だけがロールオーバーします。
こっちも意外と便利ですよー。

と、いうことで忘備録の記事でした。
参考になればですー。

関連記事

no image

YouTubeの動画をサイトに埋め込むと重い!という人のための解決方法

件名のとおりなのですが、ブログやサイトにyoutubeの動画を埋め込む...

記事を読む

みんなのアイドル「初音ミク」をブラウザ上で躍らせる「MMD.js」がktkr

はい・・・・タイトルひどいですね。 まぁそんなことはどうでもいいんで...

記事を読む

no image

チェックボックスやラジオボタンのデザインを簡単に変える方法(jQuery使用)

こんにちは、秋永です。 超久しぶりにjQuery案件で重いものがあり...

記事を読む

no image

今すぐ使える!?jQueryプラグイン紹介-part1-

はい、こんばんはです~ 3ヶ月ぶりですが、読者様は果たしているのだろ...

記事を読む

新着記事

no image

WordPressのアイキャッチのサイズを追加しても変更されないのは大体再生成すれば直る件

functions.phpでアイキャッチのサイズを変更する方法といえば...

記事を読む

bbpressのトピックスURLがループ内ですべて同じになってしまう場合の解消法

こんにちは。 今日はWordpressのプラグイン、bbpressの...

記事を読む

WordPressの管理画面をカスタマイズしよう!

最近趣味で「コミサ」というwebサイトを作ったのですが、これが会員サイ...

記事を読む

無料でデータベースも使えるサーバを紹介します!

最近趣味でサイトを運営したいなーと思った際に、このドメイン(ousia...

記事を読む

no image

YouTubeの動画をサイトに埋め込むと重い!という人のための解決方法

件名のとおりなのですが、ブログやサイトにyoutubeの動画を埋め込む...

記事を読む

コメント/トラックバック

トラックバック用URL:

コメントフィード




管理人にのみ公開されます

no image
WordPressのアイキャッチのサイズを追加しても変更されないのは大体再生成すれば直る件

functions.phpでアイキャッチのサイズを変更する方法といえば...

bbpressのトピックスURLがループ内ですべて同じになってしまう場合の解消法

こんにちは。 今日はWordpressのプラグイン、bbpressの...

WordPressの管理画面をカスタマイズしよう!

最近趣味で「コミサ」というwebサイトを作ったのですが、これが会員サイ...

無料でデータベースも使えるサーバを紹介します!

最近趣味でサイトを運営したいなーと思った際に、このドメイン(ousia...

no image
YouTubeの動画をサイトに埋め込むと重い!という人のための解決方法

件名のとおりなのですが、ブログやサイトにyoutubeの動画を埋め込む...

→もっと見る

PAGE TOP ↑