一枚ずつ画像を切り換える

赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名

戻る

実例

前へ 次へ

例文

<a href="javascript:imageChanger(-1)">前へ</a> <img src="ita.gif" name="sushi"> <a href="javascript:imageChanger(1)">次へ</a>

<script type="text/javascript">
imgFile = new Array("ita.gif","ikura.gif","ebi.gif","maguro.gif","toro.gif","uni.gif"); //*1
count = 0; //*2

function imageChanger(num) {
	//切替番号
	count += num; //*3
	//画像の枚数確認
	if (count >= imgFile.length) count = 0; //*4 枚数を超えるとき
	if (count < 0) count = imgFile.length - 1; //*5 0番目より小さいとき
	//画像出力
	document.sushi.src =imgFile[count]; //*6
}
</script>

解説

「次へ」のリンクをクリックすると画像が順番に切り換わります。「前へ」のリンクをクリックすると逆順に画像が切り換わります。

最初に<img>タグで一枚目の画像を表示します。ここでは、<img>タグにwidth（幅）やheigth（高さ）の属性を付けていません。表示する画像が全て同じサイズなら付けた方が良いでしょう。しかし、サイズの違う画像を混ぜる場合は、幅と高さがない方が、画像のサイズに合わせて表示されます。
２つのリンクで画像の表示順序を前後に切り換えます。ユーザー関数imageChangerに対し、-1の引数を与えると前に、1の引数を与えると後ろに順番を切り換えています。

（*1）複数のファイルを配列変数imgに入れています。

（*2）変数countを準備しています。

（*3）変数countに変数numを足しています。引数として変数numに入る数だけ順番が移動します。

（*4）変数countが配列変数の数以上場合、画像の枚数を超えてしまうため一枚目（0番）の画像に戻します。画像が6枚（img.length）なので、変数countは0～5の値を取らなければいけません。

（*5）変数countが0より小さい場合、配列変数の添え字の範囲から外れてしまいます。一枚目（0番）の前にあたるので、六枚目（5番）になるようにしています。

（*6）画像を表示します。

リンクの部分は今回シンプルにしましたが、ボタンにしたり画像にしても表現できます。

応用 - コメント表示

コメントを付けて同時に変更したい場合は、コメントの表示場所（*1）と配列変数（*2）を用意し、画像と同じタイミングで出力（*3）します。

追加するのは赤字の部分です。

<a href="javascript:imageChanger(-1)">前へ</a> <img src="ita.gif" name="sushi"> <div id="comment"></div> <a href="javascript:imageChanger(1)">次へ</a> //*1

<script type="text/javascript">
imgFile = new Array("ita.gif","ikura.gif","ebi.gif","maguro.gif","toro.gif","uni.gif");
imgCom = new Array("なにもない","イクラ","エビ","マグロ","トロ","ウニ"); //*2
count = 0;

function imageChanger(num) {
	//切替番号
	count += num;
	//画像の枚数確認
	if (count >= imgFile.length) count = 0; //枚数を超えるとき
	if (count < 0) count = imgFile.length - 1; //0番目より小さいとき
	//画像出力
	document.sushi.src = imgFile[count];
	//コメント出力
	document.getElementById("comment").innerHTML = imgCom[count]; //*3
}
</script>

（*1）<div>タグでコメントの出力場所を作ります。

（*2）配列変数comに画像に対応したコメントを用意します。

（*3）コメントを出力します。

応用 - 画像の半分をクリック可能にする

イメージマップを使って画像の右半分をクリックすると次へ、左半分をクリックすると前へ画像が切り換わるようにしてみましょう。

<img src="ita.gif" name="sushi" width="109" height="65" usemap="#image_map">
<map name="image_map">
<area shape="rect" coords="0,0,55,65" href="javascript:imageChanger(-1)">
<area shape="rect" coords="55,0,109,65" href="javascript:imageChanger(1)">
</map>

<map>タグを追加して、イメージマップの設定を行います。スクリプト部分はそのままですが、スクリプトの呼びだしを<a>タグではなく<area>タグで行っています。
また、<img>タグには幅と高さを設定していますが、入れ換える画像は全てこのサイズであることが前提です。

応用 - 画像の半分をクリック可能にする（２）

JavaScriptとCSSを使って上記イメージマップでやったように、右と左にクリックするスペースを作ります。

まず、HTMLファイル内にCSSを記述しておきます。以下が<style>タグの内容です。

<style type="text/css">
#base_image {
	position: absolute;
}
.click_image {
	position: absolute;
	text-decoration: none;
}
.click_image:hover {
	background-color: rgba(255,220,220,0.5);
}
</style>

.click_image:hoverで、マウスを画像に重ねるとクリックする領域に半透明の色が表示されます。必要のない場合は削除してください。

次に画像を表示したい位置に<span>タグと<a>タグを用意します。<img>タグはありませんが、後でスクリプトから出力します。

<span id="base_box"><span id="base_image"></span><a href="javascript:imageChanger3(-1)" class="click_image" id="base_prev">&nbsp;</a><a href="javascript:imageChanger3(1)" class="click_image" id="base_next">&nbsp;</a></span>

JavaScriptは以下のようになっています。

<script type="text/javascript">
imgFile = new Array("ita.gif","ikura.gif","ebi.gif","maguro.gif","toro.gif","uni.gif");
count = 0;
	
//イメージ読込
imageChanger(0);
	
function imageChanger(num) {
	var w, h;
	//切替番号
	count += num;
	//画像の枚数確認
	if (count >= imgFile.length) count = 0; //枚数を超えるとき
	if (count < 0) count = imgFile.length - 1; //0番目より小さいとき
	//画像読込
	var imgData = new Image();
	imgData.src = "./img/sushi2_" + imgFile[count];
	w = imgData.width;
	h = imgData.height;
	
	if (w > 0) {
		//画像出力
		document.getElementById("base_image").innerHTML = "<img src='" + imgData.src + "' border='0'>";
		//クリックの位置（左）
		document.getElementById("base_prev").style.width = (w / 2) + "px";
		document.getElementById("base_prev").style.height = h + "px";
		//クリックの位置（右）
		document.getElementById("base_next").style.marginLeft = (w / 2) + "px";
		document.getElementById("base_next").style.width = (w / 2) + "px";
		document.getElementById("base_next").style.height = h + "px";
	} else {
		//画像の読み込みができていないときはもう一度
		setTimeout("imageChanger(0)",500);
	}
}
</script>

サイズの異なる画像が混ざっていても対応できるように、画像を読み込んでからサイズを取得しています。
しかし、imgData.srcに画像を取得してもすぐに画像を完全に読み込むことができないため、直後では画像サイズの取得もできません。そこで、サイズが取得できていない場合には0.5秒待って同じ処理を繰り返すようにしています。

画像のファイルサイズが大きい場合、onMouseOverを使って画像を先読みしたり、準備の段階で先に画像を全部読み込んで置いても良いかもしれません。

戻る