CSS HappyLife さんの smartrollover.js を複数タグに対応できるように改造してみた

input要素（@type=“image"）にも対応したいと思い作ってみましたが、掲載する段になって大した改造はしていないことがわかって反省している。ちなみにHTMLでsrc属性が使えるのはimg要素とinput要素だけのようです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function smartRollover() {
  if(document.getElementsByTagName) {
    var tags = ["img","input"];
    var len = tags.length;
    for( var i=0; i < len; i++ ) {
      var el = document.getElementsByTagName(tags[i]);
      var len2 = el.length;
      for(var j=0; j < len2; j++) {
        var attr = el[j].getAttribute("src");
        if( attr ) {
          if(el[j].getAttribute("src").match(/_out\./))
          {
            el[j].onmouseover = function() {
              this.setAttribute("src", this.getAttribute("src").replace("_out.", "_over."));
            }
            el[j].onmouseout = function() {
              this.setAttribute("src", this.getAttribute("src").replace("_over.", "_out."));
            }
          }
        }
      }
    }
  }
}
if(window.addEventListener) {
  window.addEventListener("load", smartRollover, false);
}
else if(window.attachEvent) {
  window.attachEvent("onload", smartRollover);
}

smartrollover.js の記事にコメントをつけている LiosK さんのソースも改造してみた。こっちのが素敵みたい。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
(function(onLoad) {
    try {
        window.addEventListener('load', onLoad, false);
    } catch (e) {
        window.attachEvent('onload', onLoad);
    }
})(function() {
  var tags = ["img","input"];
  for( var i=0, len=tags.length; i < len; i++ ) {
    var over = function() { this.src = this.src.replace('_out.', '_over.'); };
    var out  = function() { this.src = this.src.replace('_over.', '_out.'); };
    var el = document.getElementsByTagName(tags[i]);
    for (var j=0, len2=el.length; j < len2; j++) {
      var attr = el[j].getAttribute('src');
      if (!el[j].src.match(/_out\./)&&attr) continue;
      el[j].onmouseover = over;
      el[j].onmouseout  = out;
    }
  }
});

ｵﾚも１からスクラッチできるようにｶﾞﾝﾊﾞﾙ。