画像（img）のsrc要素を切替える方法【jQuery不要】｜DAD UNION

画像を切替えるjQueryプラグインは色々ありますが、今回jQueryは使用せず、JavaScriptのdocument.images[].srcを使って画像（img）のsrc要素を切替える方法をご紹介します。

Contents

画像（img）のsrc要素を切替えるCSSの記述
document.images[].srcを使って画像（img）のsrc要素を切替えるJavaScriptの記述
画像（img）のsrc要素を切替えるHTMLの記述
jQueryを使用せず画像（img）のsrc要素を切替えるデモページ

画像（img）のsrc要素を切替えるCSSの記述

※必要に応じて変更して下さい。

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:2.0em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:600px;
	margin:0 auto;
	text-align:center;
}
#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>

document.images[].srcを使って画像（img）のsrc要素を切替えるJavaScriptの記述

※画像切り替え関数chgImg(ファイル名,imgのname属性名)を用意しました。パラメータの「ファイル名」「imgのname属性名」を受け取り画像を切り替えます。

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

画像（img）のsrc要素を切替えるHTMLの記述

※aリンクタグのonclickで関数chgImg(ファイル名,imgのname属性名)処理を行い、パラメータで受け取った画像ファイルにsrc要素を切替えます。必要に応じて変更して下さい。

<div id="idWrap">
    <h1>以下の数字リンクをクリックすると、対応した画像にSRC要素に切替えます。</h1>
    
    <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>
    
</div><!--/idWrap-->

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

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

　
画像数や容量が多い時は、表示されていない画像を全て読込んでから切替処理を行った方が良いと思います。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。