複数のイメージとメッセージを同時に切り換え

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

戻る

実例

例文

<img name="sushi" src="ice_white.gif" width="32" height="32" border="0">
<form name="FM"><input name="TX" type="text" size="30"></form> //*1

<a href="javascript:;" onMouseOver="msg(1)" onMouseOut="msg(0)">まぐろ</a>
<a href="javascript:;" onMouseOver="msg(2)" onMouseOut="msg(0)">えび</a>
<a href="javascript:;" onMouseOver="msg(3)" onMouseOut="msg(0)">いか</a>
<a href="javascript:;" onMouseOver="msg(4)" onMouseOut="msg(0)">たこ</a>
<a href="javascript:;" onMouseOver="msg(5)" onMouseOut="msg(0)">あなご</a>
<a href="javascript:;" onMouseOver="msg(6)" onMouseOut="msg(0)">たまご</a>
<a href="javascript:;" onMouseOver="msg(7)" onMouseOut="msg(0)">いくら</a>
<a href="javascript:;" onMouseOver="msg(8)" onMouseOut="msg(0)">うに</a>

<script type="text/javascript">
icon = new Array();
text = new Array("","tuna","shrimp","cuttlefish","octopus","conger","egg","salmon roe","sea urchin eggs"); //*2

for (n=0; n<9; n++) {
	icon[n] = new Image();
}

icon[0].src = "ita.gif";
icon[1].src = "maguro.gif";
icon[2].src = "ebi.gif";
icon[3].src = "ika.gif";
icon[4].src = "tako.gif";
icon[5].src = "anago.gif";
icon[6].src = "tamago.gif";
icon[7].src = "ikura.gif";
icon[8].src = "uni.gif";

function msg(onoff) {
	document.sushi.src = icon[onoff].src;
	document.FM.TX.value = text[onoff]; //*3
}
</script>

解説

画像を切り替える前サンプルにメッセージの表示を追加しました。
変更点に絞って解説します。

（*1）<form>タグの中にテキストを表示する<input>タグを追加しています。テキスト切換のサンプルと同じです。

（*2）表示するテキストを配列変数textに用意します。ここでは、配列変数の宣言と同時にそれぞれに格納するテキストも指定しています。最初のテキスト（text[0]）は空にしています。

（*3）ここでテキストを切り換えています。

戻る