JQueryのロールオーバーに関するあれこれ
2010年05月14日
JQueryを使用してrollover.jsを使ってロールオーバーを作成してて、Firefoxでブラウザの戻るを押すと、マウスが乗っていなくてもロールオーバーしたままなので困った。
とりあえず、ググったらはてなに情報があったので参考にして回避。
要はimgタグをすべてreplaceで置換をしてロードさせればいいみたい。
JavaScriptの記述
1 2 3 4 5 6 7 8 9 10 11 | function resetRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src").match("_on.")) { images[i].setAttribute("src", images[i].getAttribute("src").replace("_on.", "_off.")); //ロールオーバーのときのみ"_on."をつける場合は"_off."を"."に変えればOK } } } } |
次にbodyに
1 | <body onpageshow="resetRollover();"> |
と書くことで回避できる模様。
ただ、このままだと最初から「_on」がついているファイルもなってしまうので、それを除く場合は、
imgタグにclass=”rollover”をつけて、
1 2 3 4 5 6 7 8 | function resetRollover() { var images = $('img.rollover'); for(var i = 0; i < images.length; i++){ if(images[i].getAttribute("src").match("_on.")) { images[i].setAttribute("src", images[i].getAttribute("src").replace("_on.", "_off.")); } } } |
とすることで、<img class=”rollover”>のファイルのみを拾ってきます。
ちなみに自分がよく使用するロールオーバーのスクリプト。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $(document).ready(function(){ var postfix = '_on'; $('img.rollover').not('[src*="' + postfix + '."]').each(function(){ var img = $(this); var src = img.attr('src'); var src_on = src.substr(0, src.lastIndexOf('.')) + postfix + src.substring(src.lastIndexOf('.')); $('<img>').attr('src', src_on); img.hover( function(){ img.attr('src', src_on); }, function(){ img.attr('src', src); } ); }); }); |
上記の場合はimgタグにclass=”rollover”をつけたものを対象にしてますが、img.rollover部分を.rollover a imgなどと指定するとブロック単位で指定可能。
コメントする
：コメント(0)
：トラックバック(1)
コメント：0件
- コメントはありません。
トラックバック：1件
- [...] This post was mentioned on Twitter by のぶ. のぶ said: JQueryのロールオーバーに関するあれこれ http://is.gd/c8jeQ [...]
Tweets that mention JQueryのロールオーバーに関するあれこれ ｜ Director's Cut – art project team Blog - -- Topsy.com
