###前提・実現したいこと
画像のロールオーバー
###発生している問題・エラーメッセージ
以前からずっと同じ方法で画像のロールオーバーを行っていたのですが、
一年ほど前からロールオーバーがされない不具合がでています。
ブラウザによって症状がことなり、原因がわからず対処できない状態です。
Chrome:一年ほど前から/リロードを数回行うと正常に動作する場合がある
Firefox:2ヶ月ほど前から/リロードしても動かず
IE:つい先日動かなくなったが、現在正常に動いている
コーディングをした人間が社内にいないため、
どのような仕組みでロールオーバーを行っているのか現在も調査中なのですが、
(HTML内のclass="btn"で制御しているようなのですが、CSS・JSに記述箇所が見つからない状態です。)
上記の通り、リロードなどで正常に動く場合があるため、
必要な記述がないわけではないかと思います。
ブラウザ依存の問題なのでしょうか。
考えられる原因があれば、小さなことでも構いませんのでご協力頂ければ助かります。
###HTML
<ul id="home" class="gnavi"> <li><a href="/"><img src="○○○.gif" alt="○○○" width="115" height="46" id="home" /></a></li> <li><a href="/"><img src="○○○.gif" alt="○○○" width="157" height="46" class="btn" /></a></li> <li><a href="/"><img src="○○○.gif" alt="○○○" width="157" height="46" class="btn" /></a></li> <li><a href="/"><img src="○○○.gif" alt="○○○" width="157" height="46" class="btn" /></a></li> <li><a href="/"><img src="○○○.gif" alt="○○○" width="157" height="46" class="btn" /></a></li> <li><a href="/"><img src="○○○.gif" alt="○○○" width="157" height="46" class="btn" /></a></li>###JS(http://www.kyosuke.jp/yugajs/)
<script type="text/javascript" src="/design/btoner/js/yuga.js" charset="utf-8"></script>//ロールオーバー rollover: function(options) { var c = $.extend({ hoverSelector: '.btn, .allbtn img', groupSelector: '.btngroup', postfix: '_on' }, options); //ロールオーバーするノードの初期化 var rolloverImgs = $(c.hoverSelector).filter(isNotCurrent); rolloverImgs.each(function(){ this.originalSrc = $(this).attr('src'); this.rolloverSrc = this.originalSrc.replace(new RegExp('('+c.postfix+')?(\.gif|\.jpg|\.png)$'), c.postfix+"$2"); this.rolloverImg = new Image; this.rolloverImg.src = this.rolloverSrc; }); //グループ内のimg要素を指定するセレクタ生成 var groupingImgs = $(c.groupSelector).find('img').filter(isRolloverImg); //通常ロールオーバー rolloverImgs.not(groupingImgs).hover(function(){ $(this).attr('src',this.rolloverSrc); },function(){ $(this).attr('src',this.originalSrc); }); //グループ化されたロールオーバー $(c.groupSelector).hover(function(){ $(this).find('img').filter(isRolloverImg).each(function(){ $(this).attr('src',this.rolloverSrc); }); },function(){ $(this).find('img').filter(isRolloverImg).each(function(){ $(this).attr('src',this.originalSrc); }); }); //フィルタ用function function isNotCurrent(i){ return Boolean(!this.currentSrc); } function isRolloverImg(i){ return Boolean(this.rolloverSrc); } },
回答3件
あなたの回答
tips
プレビュー