備忘録：JSで画像をロールオーバー

かたくなにＣＳＳでナビなどをロールオーバーしていたが、
ちょっとJavascriptでやってみよう。

とあるサイトから分かりやすそうなソースをコピペ。




【jsソース】
ファイル名：smartRollover.js

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."));
}
}
}
}
}



【HTML】
タイトルの下に以下を記述。
<ｓｃｒｉｐｔ type="text/javascript" src="smartRollover.js">＜／ｓｃｒｉｐｔ＞

nav_on.gifとnav_off.gif画像を用意。
ボディに以下を記述。
<Ｐ><ａ href="/"><ｉｍｇ src="./nav_off.gif" alt="HOME" border=0 />＜／Ｐ＞

これで簡単ロールオーバーのできあがりっ！