JavaScriptでロールオーバーを簡単に実装する – rollover.js
2008年5月27日
JavaScript:
-
//
-
window.onload = function(){
-
var conf = {
-
className : 'btn', // クラス名
-
postfix : '_o' // マウスオン時の画像のファイル名
-
};
-
var imgNodeList = getElementsByClassName(conf.className);
-
var node;
-
for (var i=0, len=imgNodeList.length; i<len>
-
node = imgNodeList[i];
-
node.originalSrc = node.src;
-
node.rolloverSrc = node.originalSrc.replace(/(.gif|.jpg|.png)/,
-
conf.postfix+"$1");
-
preloadImage(node.rolloverSrc);
-
node.onmouseover = function() {
-
this.src = this.rolloverSrc;
-
};
-
node.onmouseout = function() {
-
this.src = this.originalSrc;
-
};
-
}
-
};
-
// クラス名によるエレメントノード配列取得
-
function getElementsByClassName(name) {
-
var elements = [];
-
var allElements = document.getElementsByTagName('*');
-
var re = new RegExp("(^|\s)" + name + "($|\s)");
-
for (var i=0, len=allElements.length; i</len><len ;>
-
if (allElements[i].className.match(re)) {
-
elements.push(allElements[i]);
-
}
-
}
-
return elements;
-
}
-
// プリロード
-
preloadedImages = [];
-
function preloadImage(url) {
-
var p = preloadedImages;
-
var l = p.length;
-
p[l] = new Image();
-
p[l].src = url;
-
}
