javascriptで個人的によく使う
画像のロールオーバーのやり方が2通りあるのでメモ。

1.IMGタグ内に直接記述する方法

このやり方は簡単♪
imgタグの中に

<a href="#">
<img src="images/btn.jpg" onmouseover="this .src='images/btn_on.jpg'" onmouseout="this .src='images/btn.jpg'"/>
</a>

のように
onmouseover=”this .src=’ロールオーバー時の画像URL‘”
onmouseout=”this .src=’ロールアウト時の画像URL‘”
を記述すればOK。
このやり方の一番良い点は画像名がなんでも良いところです。

2.外部javascriptに記述する方法

サンプル
まず、

function xRollover() {
	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", xRollover, false);
}
else if(window.attachEvent) {
	window.attachEvent("onload", xRollover);
}

というソースを記述したjavascriptのファイルを用意(roll_over.js)し、
HTMLのHEAD内に

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

のようにroll_over.jsを読み込めば準備完了!

あとはロールオーバーさせたい画像のファイル名を
btn_off ・・・ロールアウト時のファイル名には~_offを付ける
btn_on ・・・ロールオーバー時のファイル名には~_onを付ける
などにし、

<a href="#"><img src="images/btn_off.jpg" /></a>

と記述すればOK。
※_on、_offの名前はroll_over.js内で変更可能

このやり方の良い点は、ソースがシンプルになるところです。
※注意点として、必ず画像名_on、画像名_offという名前(画像名は共通)で同じディレクトリにファイルを保存する必要があります。