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

Webページで画像を動的に切り替える方法は数多く存在しますが、今回のチュートリアルでは、一般的なjQueryを使用せずに、JavaScriptのdocument.images[].srcを活用して、画像（imgタグ）のsrc属性を切り替える方法をご紹介します。

多くの開発者は、jQueryなどのライブラリを利用して簡単に画像切り替え機能を実装できます。しかし、JavaScriptだけを使って同様の機能を実装することで、ページのパフォーマンスを向上させたり、学習を通じてJavaScriptの基礎理解を深めることができます。この方法は、特に小規模なプロジェクトや単純な機能を実装する場合に適しています。

ここではわかりやすいように、段階的に解説していきますので、ぜひ最後までお付き合いください。

Contents

画像（img）のsrc要素を切替えるCSSの記述
JavaScriptで画像のsrc属性を切り替える
HTMLで画像のsrc要素を切替える方法
画像が多い場合の注意点
jQueryを使用せず画像（img）のsrc要素を切替えるデモページ
初心者向けの補足情報
まとめ

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

まず、画像のスタイルを定義するためにCSSを使います。このスタイルシートは、画像の表示やリンクの見た目をコントロールします。CSSは、見た目に関する部分を担当しており、JavaScriptの動作と連携させることで、ユーザーが快適に画像を切り替えられるようにします。

ここでは、以下の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>

このCSSでは、h1タグのスタイルや、画像リンクの表示部分のレイアウトを調整しています。これにより、ページ全体が美しく整列され、画像切り替えがスムーズに行えるような基盤が整います。

JavaScriptで画像のsrc属性を切り替える

次に、実際に画像を切り替えるためのJavaScriptコードを実装していきます。ここでは、chgImg()という関数を使用します。この関数は、2つの引数を受け取ります。1つは表示したい画像のファイル名で、もう1つはimgタグのname属性です。

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

このJavaScriptコードは、指定された画像ファイル名に基づいて、対応するimgタグのsrc属性を動的に変更します。具体的には、document.images[]はページ内のすべての画像要素を参照し、その中から指定されたname属性を持つ画像を選び出します。そして、その画像のsrc属性を、新しいファイル名に変更するのです。

たとえば、ユーザーが「画像1」をクリックしたときに、画像をi01.jpgに変更することができます。同様に、「画像2」をクリックした際には、画像がi02.jpgに切り替わります。このようなシンプルなコードで、動的な画像切り替え機能が実現できます。

HTMLで画像のsrc要素を切替える方法

それでは、次に実際にHTMLを使って、JavaScriptの関数を呼び出す形で画像を切り替える仕組みを作ってみましょう。以下のHTMLコードは、aタグ（リンク）をクリックすることで、画像が切り替わるようになっています。。

<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-->

このコードでは、aタグがクリックされると、chgImg()関数が呼び出され、指定された画像ファイルにimgタグのsrcが切り替わります。ユーザーがクリックしたリンクに対応する画像が表示されるので、直感的で操作しやすいインターフェースが実現されています。

また、imgタグには最初に表示される画像を設定しています。この例では、i01.jpgがデフォルトの画像として表示され、ユーザーがリンクをクリックすると、別の画像に切り替わります。

画像が多い場合の注意点

画像の数が増える場合や、画像のファイルサイズが大きい場合は、全ての画像を一度に読み込むとページの読み込み速度が遅くなる可能性があります。このような場合は、必要な時にのみ画像を読み込む「遅延読み込み」や、事前に画像をプリロードしておく手法を検討することが重要です。

これにより、ユーザーの操作に対してレスポンスの速い動的な画像切り替えが可能になります。特に、大規模なギャラリーサイトや、リッチメディアを多用するサイトでは、パフォーマンスを維持しながら使いやすいUIを提供するために、こうした工夫が不可欠です。

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

今回ご紹介した、jQueryを使わずにJavaScriptだけで画像を切り替える方法を、実際に動作するデモページで確認してみましょう。リンクをクリックすると、実際に画像が切り替わる様子が体験できます。

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

このデモページでは、複数の画像が表示され、ユーザーがリンクをクリックするごとに画像が切り替わる動作を確認できます。特に、画像が少ない場合やシンプルな構成のページでは、このような軽量な方法が効果的です。

初心者向けの補足情報

1. document.images[]とは？

JavaScriptでdocument.images[]を使うと、ページ内にあるすべての画像要素（imgタグ）にアクセスすることができます。この配列の中に、ページ内の各画像が格納されており、インデックス番号やname属性を使って特定の画像を指定できます。たとえば、document.images[0]はページで最初に宣言された画像を指し、document.images[‘chg’]のようにname属性がchgの画像を特定することもできます。

2. imgタグのname属性について

HTMLのimgタグには、name属性を指定することができます。このname属性は、JavaScriptからその画像を簡単に参照するためのラベルのような役割を果たします。id属性が他のHTML要素で使われるのに対し、name属性はJavaScriptとの連携に便利です。この属性を使うことで、画像を一意に特定し、簡単に操作することが可能になります。

3. javascript:void(0)の役割

リンクタグ（a）でhref=”javascript:void(0)”と記述することで、リンクがページをリロードしたり他のページに移動したりせず、JavaScriptの処理のみが行われるように制御しています。これは、リンクをクリックしてもページの状態を変えず、JavaScriptによる動作だけをトリガーしたい場合に便利な手法です。void(0)は、何も返さないことを意味し、ページの動作に影響を与えません。

4. onclickイベントの使い方

onclickは、ユーザーがリンクやボタンをクリックした際に、JavaScriptの関数を実行するためのイベントハンドラです。今回の例では、各リンクにonclickイベントを設定し、リンクをクリックするたびにchgImg()関数が呼び出され、対応する画像が切り替わる仕組みになっています。これにより、ユーザーの操作に応じてリアルタイムに画像を変更できます。

5. 画像のプリロードについて

ページのパフォーマンスを向上させるためには、表示されていない画像を事前に読み込んでおく「プリロード」の技術が役立ちます。これにより、ユーザーがリンクをクリックした際にすぐに画像が表示され、遅延を感じさせないスムーズなユーザー体験が可能です。

以下は、画像のプリロードを行う簡単なJavaScriptの例です。

function preloadImages() {
  const images = ['i01.jpg', 'i02.jpg', 'i03.jpg', 'i04.jpg', 'i05.jpg'];
  for (let i = 0; i < images.length; i++) {
    const img = new Image();
    img.src = images[i];
  }
}
window.onload = preloadImages;

このコードは、ページが読み込まれた際に、指定された画像ファイルをバックグラウンドで読み込むことができます。これにより、ユーザーが画像を切り替える際の遅延を防ぐことができます。