Hatena::ブログ(Diary)

生涯一マークアップエンジニアだっ!!

2010-10-12

ブラウザバックした時にロールオーバーしたままになってしまう問題を解消したjs

タイトル長いですが、そのまんまです。

jqueryロールオーバーを実装すると、ブラウザバックで戻ったときにロールオーバーされたままに

なっていたので、それを解消するスクリプトを作りました。


/* ロールオーバーイメージ表示
 ---------------------------------------------------------------- */
var imgChange = function(){
	var img_out; //mouseout時のsrc属性を格納
	var img_in; //mouseover時のsrc属性を格納
	var objChangeImg = $('.change');
	var hoverDom = {	//マウスオーバーされているDOM要素
		"tarDom":"",
		"img_out":""
	};

	objChangeImg.hover(function(){
		//mouseover時の処理
		img_out = $(this).attr('src');
		img_in = img_out.replace('_off.gif','_on.gif');
		$(this).attr('src',img_in);
		hoverDom = {
			"tarDom":$(this),
			"img_out":img_out
		};
	},
	function(){
		//mouseout時の処理
		$(this).attr('src',img_out);
	});

	//ページ移動時にロールオーバーを戻す
	$(window).unload(function(){
		hoverDom["tarDom"].attr("src",hoverDom["img_out"]);
	});
}

ロールオーバー処理は普通にimgタグのsrcを置換しているだけです。

ページ移動するのをwindow.unloadイベントで補足して、ページ移動時に

imgタグを元に戻しています。

全部のimgタグを戻すのは大変なので、ロールオーバーするたびに

対象となるimgタグをhoverDomオブジェクトに入れてます。


2010/10/13追記

オブジェクトのキーにダブルクォートが抜けてたので足しました。


今日のお疲れ!BGM♪

バンドワゴン/毛皮のマリーズ

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/wonohe/20101012/1286874558