jQueryで作るロールオーバー

<style type="text/css">

#rollover1 img,#rollover2 img {

	margin:0px;

}

#rollover1 li,#rollover2 li {

	float:left;

}

/* フロートの背景を確保かつ後続要素をクリア */

.clear {

	overflow: hidden;

}

.clear:after {

	display: block;

	clear: both;

	height: 0px;

	content: "";

}

/*\*/

* html clear {

	height: 0px;

	overflow: visible;

}

/**/

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

	$("#rollover1 li,#rollover2 li").css("listStyleType","none");

	$("#rollover1 img,#rollover2 img").css("border","none");

});

$(function(){

	$("#rollover1 img.on").mouseover(function(){

		$(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2"));

	}).mouseout(function(){

		$(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2"));

	});

});

$(function(){

	$("#rollover2 img.on").mouseover(function(){

		$(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2"));

	}).mouseout(function(){

		$(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2"));

	}).each(function(){

		$("").attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2"));

	});

})

</script>

<div id="rollover1" class="clear">

	<h2>プリロード非対応</h2>

	<ul>

		<li><a href="#"><img src="http://www.naganoblog.jp/usr/webdesign/rollover_home.png" alt="home" class="on" /></a></li>

		<li><a href="#"><img src="http://www.naganoblog.jp/usr/webdesign/rollover_about.png" alt="about" class="on" /></a></li>

		<li><a href="#"><img src="http://www.naganoblog.jp/usr/webdesign/rollover_blog.png" alt="blog" class="on" /></a></li>

		<li><a href="#"><img src="http://www.naganoblog.jp/usr/webdesign/rollover_contact.png" alt="contact" class="on" /></a></li>

	</ul>

</div>

<div id="rollover2" class="clear">

	<h2>プリロード対応</h2>

	<ul>

		<li><a href="#"><img src="http://www.naganoblog.jp/usr/webdesign/rollover2_home.png" alt="home" class="on" /></a></li>

		<li><a href="#"><img src="http://www.naganoblog.jp/usr/webdesign/rollover2_about.png" alt="about" class="on" /></a></li>

		<li><a href="#"><img src="http://www.naganoblog.jp/usr/webdesign/rollover2_blog.png" alt="blog" class="on" /></a></li>

		<li><a href="#"><img src="http://www.naganoblog.jp/usr/webdesign/rollover2_contact.png" alt="contact" class="on" /></a></li>

	</ul>

</div>