qriptotype（仮称）に対抗してLooTools!!!!…に組み込むための画像ロールオーバーのコードを書いてみた

ただいま社内のJSライブラリを作ろうという動きがあります。
それを勝手にqriptotypeと名付けているのですが（qQueryとのせめぎ合い）、オレオレプラグイン集を作ろうということでそれをLooToolsと名付けました！！

オレオレプラグイン集を作ってqriptotypeに還元できたらいいのですがね～。
まずは手始めにjQueryに依存しないロールオーバーのコードを書いてみることにしました。
とはいえ参考にしたソースがあるのですが。
2012年11月30日にコードを編集

(function(window) {
  if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') > 0) || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') == -1 )||(navigator.userAgent.indexOf('Android') == -1 && navigator.userAgent.indexOf('iPhone') == -1 )) {
    var rollover = function() {
      if(document.getElementsByTagName) {
        var img = document.getElementsByTagName('img'),
            preImg = [];
        for (var i=-1,j=-1,n=img.length; ++i < n;) {
          if (img[i].getAttribute('src').match(/_off\./)) {
            preImg[++j] = new Image();
            preImg[j].src = img[i].getAttribute("src").replace("_off.", "_on.");
            img[i].onmouseover = function() {
              this.setAttribute('src', this.getAttribute('src').replace('_off.', '_on.'));
            };
            img[i].onmouseout = function() {
              this.setAttribute('src', this.getAttribute('src').replace('_on.', '_off.'));
            };
          }
        }
      }
    };
    if(window.addEventListener) {
      window.addEventListener("load", rollover, false);
    }
    else if(window.attachEvent) {
      window.attachEvent("onload", rollover);
    }
  }
}(window));

元のコードはCSS HappyLifeさんより。

元々はこのコードをそのまま使っていましたが、これではちょっと問題が出るので改造しました。

1. 画像がプリロードされてない

大きな問題は上記の1点ですが、細かく見ると

1. ループの処理
2. ロールオーバーさせるファイルの名前
3. 個人的にタッチデバイスではロールオーバーの処理は不要思ってる

1つめのループの処理については、現状ではループの処理が走る毎にimages.lengthの処理も走ってしまうので、ループ回数は変数に入れて1回だけの処理で済ますことで高速化に繋がるようです～。

2つめは元サイトのif(images[i].getAttribute("src").match("_off."))だと、_offの後に何らかの1文字がある場合にtrueになってしまうので、_off2.jpgなどのファイル名がtrueになってしまいます。今回はプリロードの機能もぶち込んでそこで問題が出てくるのでif(images[i].getAttribute("src").match(/_off\./))に変更しました。

3つめはタッチデバイスの場合、タップした時にロールオーバーするので、個人的にいらないと思っています。しかも、元のスクリプトならオーバー画像をプリロードしないので、ボタンをタップしたらボタンが消えてしまう現象が発生してしまいます。。
なので別のサイトから頂戴してきたタッチデバイスとそれ以外を分岐するコードを用いてPCでしかロールオーバーが発火しないようにしています。

今はスタンドアロンのロールオーバー用のコードですが、プラグイン集にするにはこのコードのままでは問題ありなので、次のステップはOOPで書き直すことです。
qriptotypeに還元したり、オレオレプラグイン集を公開できるところまでクオリティを高めていきたいと思います。