TOKYO LITERACY

T.L.Web制作便利帖

facebook

TOP < T.L.Web制作便利帖

東京リテラシー

2014年1月14日

ブラウザバックするとロールオーバーした画像が元に戻らない場合の対処

jQueryは手軽にロールオーバー、ロールアウトを実装できます。
例えば以下のように記述すれば、クラス名が「rollover」のimg要素をロールオーバーで切り替えることが可能です。

$(function nav01(){
 $("img.rollover").hover(function(){
  $(this).attr("src",$(this).attr("src").replace("_off.", "_on."));
 },function(){
  $(this).attr("src",$(this).attr("src").replace("_on.", "_off."));
 });
});

ただこのような「hover」を使った記述だけの場合、ロールオーバーした画像をクリックしてページ遷移した後にブラウザバックで元のページに戻ると、画像が元に戻っていなかったり非表示になっていたりすることがあります。この現象はとくにスマホやタブレットなどのタッチパネルの端末で起こるようです。

対処法はいくつかありますが、画像をクリックして別ページに遷移した際にロールオーバー判定が残ってしまうことが原因なので、ここではシンプルに画像をクリックした際に元の画像に戻る命令を加える方法を紹介します。
やり方は簡単。以下の赤字の行を加えるだけです。

$(function nav01(){
 $("img.rollover").hover(function(){
  $(this).attr("src",$(this).attr("src").replace("_off.", "_on."));
 },function(){
  $(this).attr("src",$(this).attr("src").replace("_on.", "_off."));
 });		
 $("img.rollover").click(function(){
  $(this).attr("src",$(this).attr("src").replace("_on.", "_off."));
 });
});

ようするに、画像をロールアウトした時の命令(緑字の行)が、画像をクリックした際にも実行されれば良いわけです。
このやり方であれば、スクリプトの記述が苦手なWebデザイナーの方でも簡単に対処できるのではないでしょうか。

スマホ、タブレット対応のサイトを制作する際は、是非確認してみてください。

T.L.Web制作便利帖インデックスに戻る

tel
メールでのお問合せはこちら