jQueryを使用せず画像（img）のsrc要素を切替える方法

jQueryのプラグインで切替える方法は色々ありますが、jQueryプラグインの利用が多くなる前使ってた方法です。
JavaScriptのdocument.images[].srcを使用して画像要素を切替えます。

1．CSSの記述例

以下は任意です。

<style type="text/css">
<!--
#idLink{
	width:180px;
	text-align:center;
	margin:0 auto;
	padding-top:10px;
}
#idLink a{
	text-decoration:none;
	color:#333333;
	font-size:18px;
}
#idLink a:hover{
	text-decoration:underline;
	color:#666666;
	font-size:18px;
}
-->
</style>

2．JavaScriptの記述例

<script type="text/javascript">
function chgImg(fileName,imgName){
	document.images[imgName].src = fileName;
}
</script>

3．HTMLの記述例

aリンクのonclickで上記functionを呼んでます。

<div align="center"><img name="chg" src="i01.jpg" alt="" width="300" height="300"></div>

    

<div id="idLink">
    <a href="javascript:void(0)" onclick="chgImg('i01.jpg','chg');">1</a>　<a href="javascript:void(0)" onclick="chgImg('i02.jpg','chg');">2</a>　<a href="javascript:void(0)" onclick="chgImg('i03.jpg','chg');">3</a>　<a href="javascript:void(0)" onclick="chgImg('i04.jpg','chg');">4</a>　<a href="javascript:void(0)" onclick="chgImg('i05.jpg','chg');">5</a>
</div>

jQueryを使用せず画像（img）のsrc要素を切替えるデモページ

画像数や容量が多いときは、表示されていない画像を全て読込んでからの方が良いと思います。