menu

Web制作のTipsとかアレコレ。

rollover.js を改変して、hover時だけじゃなくてcurrentでもゴキゲンに動作するようにしてみた。

2013.11.06

画像のロールオーバーにはお手軽で軽量なrollover.js(CSS-EBLOGさん作)を使わせてもらってます。この手のスクリプトは幾つもあると思うんですけど、このrollover.jsを、画像ファイル名

・通常時 何にもなし
・hover時 ファイル名末尾に “_on”などを付ける

といった形で使ってます。ファイル名本体部分にハイフンを使うようにしてアンダースコアを極力使わないようにすれば予想外の挙動をしちゃうことはないですね。

ところが!今コーディングをしている案件でちょっと困ったのです。

ページ内サイドバーにローカルナビゲーションがあって、全て画像でロールオーバーするようになってましてですね、currentクラス付与はまあ最後にやろ~ってことで、

<ul class="local-navigation">
  <li>
    <a href="#">
      <img src="xxx/xxxxx/xxxx.png" alt="メニュー" class="rollover">
    </a>
  </li>
  <li>
   ・・・続く
</ul>  

とまあ、こんな風に書いちゃってました。画像じゃなかったらOKだし、いつもなら画像はlist itemの背景に持ってくるのでCSSでロールオーバーするのであんまり考えたことなかったんですわな。

で、HTMLとCSSをいじって直すかjavascriptの方をいじるかって選択で、今後のことも考えてrollover.jsを改変しようと思い、やってみました。

何が問題なのかというと伏線がございまして。
まず先に、別スクリプトでlilst itemにclass=”current”を与えたら、その子要素の画像ファイル名に”_on”を付与してやるってことにしてたんですけど、そうすると、rollover.jsがさらに”_on”を重ねた”xxxxxx_on_on.png”を探しにいっちゃって、currentのメニューにマウスを乗っけた時に悲惨なことになるんですね。

で、removeClass(“rollover”) を試してみたんですけどなぜかうまく機能せず…。おかしいなぁと言いながら、おもむろにrollover.jsを開いてみました。

ここから一気に結論。出来上がったコードです。
前半部分は一切いじってません。
最後にイベントを実行する “startRollover”関数の部分のみを改造してます。

function startRollover() {
  var jParam = getJsParam();
  var jType = jParam.type ? jParam.type : '_on';
  var imgs = document.getElementsByTagName( 'img' );
  for( var i=0; i<imgs.length; i++ ) {
    var imgFileName = imgs[i].src;
    if(!(imgFileName.match(/_on\.png$/i))){
      if( imgs[i].className.indexOf( _className ) !== -1 ) {
         setEvent( imgs[i], jType );
      }
    }
  }
}

はい、

!(imgFileName.match(/_on\.png$/i))

の一行だけです(笑)

まあ、いいではないか。これにて一件落着なり。

とりあえず、最近はほとんどのパーツ画像をpngで切り出しているのでongのみ。
時間がある時にでもjpgやgifも仲間に入れてあげよう。

Comments

please leave your comment...

▲ Page Top