JavaScriptでロールオーバー

• Feb 27, 2008
• Tags: javascript, tips

下記のJavaScriptファイルを用意します。

function smartRollover() {
if(document.getElementsByTagName) {
var images = document.getElementsByTagName("img");
for(var i=0; i < images.length; i++) {
if(images[i].getAttribute("src").match("_off."))
{
images[i].onmouseover = function() {
this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
}
images[i].onmouseout = function() {
this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
}
}
}
}
}
if(window.addEventListener) {
window.addEventListener("load", smartRollover, false);
}
else if(window.attachEvent) {
window.attachEvent("onload", smartRollover);
}

「smartRollover.js」で保存し、外部ファイルとして読み込みます。（記述する場所は、head要素内）

<script type="text/javascript" src="smartRollover.js"></script>

通常時の画像と、ロールオーバー時の画像を別々で用意し、ファイル名の最後に「_on」、「_off」と付けます。

「_off」の画像を指定します。

<a href="..."><img src="画像ファイル名_off.gif" alt="..." /></a>

「画像ファイル名_off.gif」が、「画像ファイル名_on.gif」に入れ替わる仕組みです。 サンプルは「gif」ですが、「jpg」や、「png」でも可能です。