本文へジャンプ

howtohp.com

JQueryで画像置換

まず、仕様としては、画像のファイル名の最後に、「_off」とついているものにマウスオーバーすると、画像のファイル名の「_off」の部分を「_on」に切り替えて、画像を入れ替えると言うものです。

もう少し細かく解説すると、imgタグもしくはinputタグのsrc属性の値を入れ替え、マウスアウトで「_on」の部分を「_off」に戻します。
ですが、このままですと、現在のページなんかでもともと「_on」の状態にしておきたいときも、マウスを乗せてからはずすと「_off」に切り替わってしまいます。

なので、元々「_on」のものには「current」というクラスを付け、currentというクラスが付いているものには切り替えの処理をしないようにします。

以下がソースです。

$(document).ready(function(){
	$("img[src*='_on']").addClass("current");
	
	$("img,input").mouseover(function(){
		if ($(this).attr("src")){
			$(this).attr("src",$(this).attr("src").replace("_off.", "_on."));
		}
	});

	$("img[class!='current'],input").mouseout(function(){
			if ($(this).attr("src")){
				$(this).attr("src",$(this).attr("src").replace("_on.", "_off."));
			}
	});
});

ページ先頭へ戻る

Trackback URI

http://howtohp.com/mt5/mt-tb.cgi/3

Add Comments

コメント入力フォーム
 (公開されません)