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要素を切替えるデモページ

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