«
»

JavaScriptでロールオーバーを簡単に実装する – rollover.js

2008年5月27日

Filed under: Ajax,JavaScript — admin @ 7:19 PM
PLAIN TEXT
JavaScript:
  1. //
  2. window.onload = function(){
  3.     var conf = {
  4.         className : 'btn',  // クラス名
  5.         postfix : '_o'    // マウスオン時の画像のファイル名
  6.     };
  7.     var imgNodeList = getElementsByClassName(conf.className);
  8.     var node;
  9.     for (var i=0, len=imgNodeList.length; i<len>
  10.         node = imgNodeList[i];
  11.         node.originalSrc = node.src;
  12.         node.rolloverSrc = node.originalSrc.replace(/(.gif|.jpg|.png)/,
  13.             conf.postfix+"$1");
  14.         preloadImage(node.rolloverSrc);
  15.         node.onmouseover = function() {
  16.             this.src = this.rolloverSrc;
  17.         };
  18.         node.onmouseout = function() {
  19.             this.src = this.originalSrc;
  20.         };
  21.     }
  22. };
  23. //  クラス名によるエレメントノード配列取得
  24. function getElementsByClassName(name) {
  25.     var elements = [];
  26.     var allElements = document.getElementsByTagName('*');
  27.     var re = new RegExp("(^|\s)" + name + "($|\s)");
  28.     for (var i=0, len=allElements.length; i</len><len ;>
  29.         if (allElements[i].className.match(re)) {
  30.             elements.push(allElements[i]);
  31.         }
  32.     }
  33.     return elements;
  34. }
  35. //  プリロード
  36. preloadedImages = [];
  37. function preloadImage(url) {
  38.     var p = preloadedImages;
  39.     var l = p.length;
  40.     p[l] = new Image();
  41.     p[l].src = url;
  42. }

コメントはまだありません »

コメントはまだありません。

この投稿へのコメントの RSS フィード。

コメントする