ブラウザバックした時にロールオーバーしたままになってしまう問題を解消した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♪
バンドワゴン/毛皮のマリーズ