汎用性のあるロールオーバーを作成します。

例として閉じるボタンを作成します。
画像は、「close.gif」と「close_mo.gif」を用意します。

img要素にname属性を指定しておきます。
これを利用して画像の置き換えを行います。

名前付けの注意点として、予約語は避けます。
例えばここでいう閉じるボタンにname="close"とすると正常に動作しません。

<a href="javascript: window.close();"><img name="close_button" src="close.gif" alt="閉じる" onmouseover="swap_image(this.name, this.src);" onmouseout="swap_image(this.name, this.src);"></a>

次に画像を入れ替えるJavaScript

function swap_image(name, src)
{
	var extension, toSrc, newImage;

	if(src.indexOf("_mo") != -1)
	{
		toSrc = src.replace("_mo.", ".");
	}
	else
	{
		extension = src.substr(src.length - 3);

		toSrc = src.replace("." + extension, "_mo." + extension);
	}

	newImage = new Image();
	newImage.src = toSrc;

	eval("document."+name+".src = '"+newImage.src+"';");
}

これだけでも一応完成ですが、ボタン画像を新しくした場合等
キャッシュを表示してしまい、ロールオーバーで入れ替わる画像が前の画像…、という事態になってしまうことがあります。
そういった現象を防ぐため、ページの読み込み時に画像のプリロードをしておくとよいでしょう。

window.onload = function()
{
	var img = new Image();
	img.src = "close_mo.gif";
}