このページでの使用例

<script type="text/javascript">
//切り替え対象を指定（id）
var mr = new MultiRollover("MULTI_ROLLOVER_TARGET");
//ロールオーバー対象を指定（id）
mr.addTarget("MULTI_ROLLOVER_THUMBS");
//切り替え画像を指定（画像へのパス）
mr.addSource("img/image_1.jpg",
			 "img/image_2.jpg",
			 "img/image_3.jpg",
			 "img/image_4.jpg",
			 "img/image_5.jpg");
mr.observe(window, "load", mr, mr.create);
</script>
<div class="image">
<img id="MULTI_ROLLOVER_TARGET" src="img/image_1.jpg" alt="" width="500" height="375" />
</div>
<ul id="MULTI_ROLLOVER_THUMBS" class="list clearfix">
<li><a id="thumb1" href="#"><img src="img/thumb_1_out.jpg" alt="" width="75" height="75" /></a></li>
<li><a id="thumb2" href="#"><img src="img/thumb_2_out.jpg" alt="" width="75" height="75" /></a></li>
<li><a id="thumb3" href="#"><img src="img/thumb_3_out.jpg" alt="" width="75" height="75" /></a></li>
<li><a id="thumb4" href="#"><img src="img/thumb_4_out.jpg" alt="" width="75" height="75" /></a></li>
<li><a id="thumb5" href="#"><img src="img/thumb_5_out.jpg" alt="" width="75" height="75" /></a></li>
</ul>

コード

//コンストラクタ、切り替え対象を指定
MultiRollover = function(_listener)
{
	this.listener_id = _listener;
	this.target_id = "";
	this.sources = [];
}
MultiRollover.prototype = {
	//ロールオーバー対象を指定
	addTarget: function(_target)
	{
		this.target_id = _target;
	},
	//切り替え画像を指定
	addSource: function()
	{
		for(var i=0; i<arguments.length; i++)
		{
			this.sources.push(arguments[i]);
		}
	},
	//それぞれのサムネールにイベントを予約
	create: function()
	{
		var listener = document.getElementById(this.listener_id);
		if(document.getElementById(this.target_id))
		{
			var out_target = document.getElementById(this.target_id);
			var over_targets = out_target.getElementsByTagName("a");
		}
		for(var i=0; i<over_targets.length; i++)
		{
			var over_target = over_targets[i];
			var src = this.sources[i];
			//関数を返す無名関数実行文
			var callback = (function(_src)
			{
				return function()
				{
					this.src = _src;
				};
			})(src);
			this.observe(over_target, "mouseover", listener, callback);
			//プリロード
			(new Image).src = src;
			
			src = this.sources[0];
			callback = function()
			{
				this.src = src;
			};
			this.observe(over_target, "mouseout", listener, callback);
		}
	},
	//イベント予約関数を統合（DOM LEVEL 2イベントとIEのイベントに対応）
	observe: function(_el, _func, _listener, _callback)
	{
		if(_el.addEventListener)
		{
			_el.addEventListener(_func, function(e)
			{
				_callback.call(_listener, e);
			}, false);
		}
		else if(_el.attachEvent)
		{
			_el.attachEvent("on"+_func, function(e)
			{
				_callback.call(_listener, e);
			});
		}
	}
}

ついでに普通のロールオーバーもイベントハンドラ直書きをやめるのと、画像先読みするように変更しました。

正規表現周りは参考にしたサイトがあったのですが失念してしまいました。思い出したら書きます。

追記：参考にしたのはJavaScriptでロールオーバーでした。さらにそこの正規表現の元ネタはJS でロールオーバー - IT戦記でした。

(function()
{
	var observe = function(_el, _func, _listener, _callback)
	{
		if(_el.addEventListener)
		{
			_el.addEventListener(_func, function(e)
			{
				_callback.call(_listener, e);
				
			}, false);
		}
		else if(_el.attachEvent)
		{
			_el.attachEvent("on"+_func, function(e)
			{
				_callback.call(_listener, e);
			});
		}
	};
	observe(window, "load", this, function()
	{
		var tags = ["img","input"];
		
		for(var i=0; i<tags.length; i++)
		{
			var nl = document.getElementsByTagName(tags[i]);
			for(var j=0; j<nl.length; j++)
			{
				var el = nl[j];
				if (!el.src.match(/^(.*_)out(\..*)$/)) continue;
				var out = el.src, over = RegExp.$1+"over"+RegExp.$2;
				var rewrite = (function(_out, _over)
				{
					return function(e)
					{
						var img = e.target || window.event.srcElement;
						img.src = (img.src == _out) ? _over : _out;
					}
				})(out, over);
				observe(el, "mouseover", el, rewrite);
				observe(el, "mouseout", el, rewrite);
				(new Image).src = over;
			}
		}
	});
})();