基本的なイメージの切り換え方法
--- 実例 ---
--- 例文 ---
<A HREF="sample.html" onMouseOver="msg(1)" onMouseOut="msg(2)"><IMG NAME="G01" SRC="enter.gif" WIDTH=100 HEIGHT=50 BORDER=0></A> <SCRIPT LANGUAGE="JavaScript"> icon = new Array(); //*1 icon[1] = new Image(100,50); //*2 icon[2] = new Image(100,50); icon[1].src = "go.gif"; //*3 icon[2].src = "enter2.gif"; //*4 function msg(num) { document.G01.src = icon[num].src; //*5 } </SCRIPT>--- 解説 ---
まず、イメージを３つ用意しました。
通常は２つの画像（左・中）を使います。左の画像（<IMG>タグ内）が最初に表示され、マウスを置くと中の画像（*3）に変わり、マウスを外すと左の画像に戻るようにします。
今回は最初状態と違うことを示すために、マウスを外すと右の画像（*4）を表示するようにしてあります。これを最初の画像と同じ名前にすれば元の画像に戻ります。<IMG>タグの中に「NAME="G01"」という記述があります。これはスクリプトで画像を指定するための名前になっています。（名前は任意ですが、１文字目はアルファベットにしてください）
<A>タグの中身はメッセージを表示するときと同じです。次にスクリプトの流れを確認しましょう。
まず、icon という配列変数を設定（*1）しています。まず、画像を入れるための入れ物を用意するわけです。
次にその入れ物に画像を入れる準備（*2）をします。同時に画像の大きさも指示しています（WIDTH=100,HEIGHT=50）。
icon[1] と icon[2] という２つの画像の入れ物（変数）を作りました。
実際にどの画像を入れるのか決定します。icon[1] には「go.gif」（*3）をicon[2] には「enter2.gif」（*4）を入れました。この段階で画像はブラウザに読み込まれています。ここまでが画面を表示した段階での準備となります。画像はブラウザに読み込まれていつでも切り換え出来る状態になっています。
実際にマウスを元画像「enter.gif」の上に動かすと「go.gif」に切り換わります。
document.G01.src はG01という名前の画像（src）を表示（document）しないさいという意味です。
どの画像かというと、icon[num].src となっていますので、num が1のときと2の時で、先に指定した２つの画像が選別されます。
今回は onMouseOver で「1」を、onMouseOut で「2」を num に引き継いでいます。--- 応用 ---
じっくりとHTMLの部分を見て、<A>と<IMG>は同時に別々の仕事をしていることに気が付くでしょうか。
<A>はマウスの状態を判別し、<IMG>はその結果を受け取るということです。そこでこれらを別々にすることもできるのです。
実例 例文
ここにマウスを<IMG NAME="G01" SRC="enter.gif" WIDTH=100 HEIGHT=50 BORDER=0>
<A HREF="sample.html" onMouseOver="msg(1)" onMouseOut="msg(2)">ここにマウスを</A>この方法は見出しの頭に付いているアイコンを光らせたりするのに使ったりできます。（「複数の同じイメージを切り換える」で解説）
また、切り換えに使用する画像は GIF でも JPEG でも良いですし、アニメーションGIF を使うこともできます。これだけでもかなりの用途が考えられるでしょう。
複数のイメージ切り換えボタン
--- 実例 ---
（クリックしてもリンクは使えません。）--- 例文 ---
<A HREF="JavaScript:;" onMouseOver="msg(1,0)" onMouseOut="msg(1,1)"><IMG NAME="G11" SRC="enter.gif" WIDTH=100 HEIGHT=50 BORDER=0></A> <A HREF="JavaScript:;" onMouseOver="msg(2,0)" onMouseOut="msg(2,1)"><IMG NAME="G12" SRC="ice_white.gif" WIDTH=32 HEIGHT=32 BORDER=0></A> <A HREF="JavaScript:;" onMouseOver="msg(3,0)" onMouseOut="msg(3,1)"><IMG NAME="G13" SRC="ice_choco.gif" WIDTH=32 HEIGHT=32 BORDER=0></A> <SCRIPT LANGUAGE="JavaScript"> icon = new Array(); for (n = 1; n <4; n++) { //*1 icon[n] = new Image(); //*2 icon[n+10] = new Image(); //*3 } icon[1].src = "go.gif"; //*4 icon[11].src = "enter.gif"; //*5 icon[2].src = "ice_pink.gif"; icon[12].src = "ice_white.gif"; icon[3].src = "ice_blue.gif"; icon[13].src = "ice_green.gif";//*6 function msg(num,onoff) { //*7 if (num == 1) document.G11.src = icon[num+10*onoff].src; //*8 if (num == 2) document.G12.src = icon[num+10*onoff].src; if (num == 3) document.G13.src = icon[num+10*onoff].src; } </SCRIPT>--- 解説 ---
今回は onMouseOver から msg() へ２つの数字が引き継がれます。
msg(num,onoff) （*7）は num が画像の番号、onoff がマウスの状況による切り換えです。msg(1,0) だと１つ目の画像を onMouseOver で呼び出しています。
最初の画像の準備では for文（*1）が用意されています。これは条件にそって{}内の処理を繰り返すことを意味しています。
for (n = 1; n <4; n++) は、変数n に1を代入し、繰り返す毎に n に1を足す（n++はn=n+1の略）、それを n<4の条件を満たす間続けるということ。すなわち３回繰り返すということです。
繰り返される内容は配列変数iconにイメージを割り当てる内容です。icon[1]は１つ目の画像の onMouseOver の時のもの（*2,*4）、それに10足したicon[11]が１つ目の画像を元に戻す画像（*3,*5）です。
これは function 処理の中で２つの切り換えを１行で行う（*8）ための工夫です。
当然ですが、for文は繰り返す回数が多ければ多いほど効果は大きくなります。処理内容の行数を増やさなくても、処理回数を増えるように数字を書き換えるだけで済むからです。１つ目の画像を切り換えるときの流れを見てみましょう。
onMouseOver="msg(1,0)" で num =1, onoff = 0 が msg() に引き継がれます。（*7）
if (num == 1) で条件に合致し、画像G11に画像を引き渡します。（*8）
引き渡される画像は icon[num+10*onoff] という番号になっています。[]の中を計算すると「1」になります。マウスを外したときは、onoff=1ですから計算結果は「11」になります。
これが１つのif文で２つの処理を行うという仕組みです。３つめの画像だけ少し仕掛けが違います。最初は黒いアイスが、マウスを載せると青、マウスを外すと緑になります。２つめの画像だと白→ピンク→白と戻っています。
これは単純な仕掛けで、マウスを外したときの画像を<IMG>タグで置いた画像と異なるものに指定しているということです。（*6）画像の番号をうまく並べれば数カ所で処理をまとめることが可能になります。これが分かり難い場合は、１つ１つ名前を変えてしまえばスクリプトは長くなりますが、流れは分かりやすくなるでしょう。
複数の同じイメージを切り換える
--- 実例 ---
１つ目のページへ移動
（クリックしてもリンクは使えません。）
--- 例文 ---
<IMG NAME="G21" SRC="arrow_yellow.gif" WIDTH=8 HEIGHT=8 BORDER=0><A HREF="JavaScript:;" onMouseOver="msg(1,0)" onMouseOut="msg(1,1)">１つ目のページへ移動</A><BR> <IMG NAME="G22" SRC="arrow_yellow.gif" WIDTH=8 HEIGHT=8 BORDER=0><A HREF="JavaScript:;" onMouseOver="msg(2,0)" onMouseOut="msg(2,1)">２つ目のページへ移動</A><BR> <IMG NAME="G23" SRC="arrow_yellow.gif" WIDTH=8 HEIGHT=8 BORDER=0><A HREF="JavaScript:;" onMouseOver="msg(3,0)" onMouseOut="msg(3,1)">３つ目のページへ移動</A> <SCRIPT LANGUAGE="JavaScript"> icon = new Array(); icon[0] = new Image(); icon[1] = new Image(); icon[0].src = "arrow_red.gif"; //*1 icon[1].src = "arrow_blue.gif"; //*2 function msg(num,onoff) { if (num == 1) document.G21.src = icon[onoff].src; //*3 if (num == 2) document.G22.src = icon[onoff].src; if (num == 3) document.G23.src = icon[onoff].src; } </SCRIPT>--- 解説 ---
画像の数が少なければその分スクリプトは短くなります。
今回は icon[0]（*1）とicon[1]（*2）を共有して使いますので、画像の指定も読み込みも２行だけです。function の中はあまり変わりません。ただ、２種類だけなので計算式がいらなくなっています。
画像の番号を指定するために、画像の数だけ if文は必要です。呼び出す画像の番号が onoff によって切り換わるだけです。--- 応用 ---
functionの内容を１行にまとめることも出来ます。
これならば入れ替えしたいイメージが全て同じ場合に、複数のイメージを全て同じように入れ換えることが出来ます。function msg(num,onoff) { document.images["G2" + num].src = icon[onoff].src; }images[ "G2"+num]の部分が、この名前のイメージですよという意味になっていて、<IMG>内のNAMEオプションの名前に対応します。今回は「G21」「G22」「G23」という名前なので「G2」の後ろにnumで取ってきた数字を継ぎ足しています。このnumに入る数字は同じものがあると正しく動作しないので注意してください。
画像も複数ある場合は、前項のサンプルでやった画像を１つの式で切り換えるものに応用します。前項のサンプルを改良すると以下のようになります。
function msg(num,onoff) { document.images["G1" + num].src = icon[num+10*onoff].src; }計算式に合うように<IMG>のNAMEオプションや画像の番号を用意する必要があり、計算式が複雑で分からないという方は、この応用はせずに１つ１つの切換の文を書いておいた方が良いでしょう。
複数のイメージを１ヶ所で切り換える
--- 実例 ---
（クリックしてもリンクは使えません。）
--- 例文 ---
<IMG NAME="G31" SRC="suhi2_ita.gif" WIDTH=32 HEIGHT=32 BORDER=0> <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> <SCRIPT LANGUAGE="JavaScript"> icon = new Array(); for (n = 0; n <5; n++) { //*1 icon[n] = new Image(); //*2 } icon[0].src = "sushi2_ita.gif"; //*3 icon[1].src = "sushi2_maguro.gif"; //*4 icon[2].src = "sushi2_ebi.gif"; icon[3].src = "sushi2_anago.gif"; icon[4].src = "sushi2_tamago.gif"; function msg(onoff) { //*5 document.G31.src = icon[onoff].src; //*6 } </SCRIPT>--- 解説 ---
実に短く分かりやすくなりました。
for文（*1）では0〜4までを繰り返し、画像用の変数を準備（*2）しています。
icon[0] は元に戻る画像（*3）です。以降がそれぞれのリンクに対応した画像（*4）です。マウスを「Red」というリンクの文字に持っていくと、msg(onoff) に「1」が引き継がれます。（*5）
function 処理は１行だけです。画像の場所（G31）が１ヶ所だけですので、１行（*6）で終わってしまいます。画像の切換は引き継ぐ onoff の数字だけで行っています。実はこの処理はメッセージをステータスやフォームに表示するのに似ています。ただ、メッセージの場合は事前に変数を用意せず、function の中で直接ステータスやフォームにメッセージを入れています。
画像は先に読み込んで切換の時間を節約しているのです。さて、ここでもうひと工夫があります。リンクを押しても画面が変わらないようにする方法です。
onMouseOver を使おうと思うとどうしても<A>タグを使わなければなりません。しかも「HREF=""」を省略することもできないのです。
そこで、例文では「HREF="JavaScript:;"」としています。これはダミーと呼ばれるもので、実際はクリックするとJavaScriptを呼び出すときに使用するものですが、何も関数が書かれていないため実行せずに終わるようになっています。
ようするに何もするなという命令のような役割を果たしているのです。--- 応用 ---
画像を切り換えても消す必要のない場合、icon[0]が不要となりますので、それに関連する部分を削除します。
・onMouseOut を使用しないので、これを全部消します。
・for文が0から始まるのでこれを1にします。（*1）→ for (n = 1; n <4; n++) {
・icon[0] は要らないので消します。（*3）画像の数を増やして使う場合、icon[X] の変数を順に増やして行きます。（ここではX個とします。）
・icon[n] をX個準備する。（*1）→ for (n = 1; n <X+1; n++) {
・icon[0] から icon[X] までグラフィックファイルを用意する。（*3）
・onMouseOver を使ったリンクをX個まで取り付ける。
複数のイメージとメッセージを同時に切り換える
--- 実例 ---
（クリックしてもリンクは使えません。）
--- 例文 ---
<IMG NAME="G41" 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 LANGUAGE="JavaScript">
icon = new Array();
text = new Array(); //*2
for (n = 0; n <9; n++) {
icon[n] = new Image();
}
icon[0].src = "sushi2_ita.gif";
icon[1].src = "sushi2_maguro.gif";
icon[2].src = "sushi2_ebi.gif";
icon[3].src = "sushi2_ika.gif";
icon[4].src = "sushi2_tako.gif";
icon[5].src = "sushi2_anago.gif";
icon[6].src = "sushi2_tamago.gif";
icon[7].src = "sushi2_ikura.gif";
icon[8].src = "sushi2_uni.gif";
text[0] = ""; //*3
text[1] = "tuna"; //*4
text[2] = "shrimp";
text[3] = "cuttlefish";
text[4] = "octopus";
text[5] = "conger";
text[6] = "egg";
text[7] = "salmon roe";
text[8] = "sea urchin eggs";
function msg(onoff) {
document.G41.src = icon[onoff].src;
document.FM.TX.value = text[onoff]; //*5
}
</SCRIPT>
--- 解説 ---
前サンプルにメッセージの表示切換を追加し、数を増やしました。変更点のみ解説します。
まず、メッセージを表示するための<FORM>タグを追加（*1）しています。テキスト切換のサンプルと同じです。
スクリプトの中には画像と同じようにテキストを変数（text[n]）に入れる配列変数を準備（*2）をしています。
次に各グラフィックに対応したメッセージを準備（*4）します。今回は青が表示されているときには、メッセージを表示しない（消す）ようにするため、text[0] にはメッセージが入っていないものを用意（*3）しておきます。
メッセージはグラフィックのようにfor文などでサイズを定義する必要はありません。直接配列変数にメッセージを入れていきます。
function の中にはメッセージを切り換える文（*5）を追加します。同じfunction を使うことで簡単にグラフィックと同時に切換が行われます。
マウスを画像に乗せると背景が変わる
--- 実例 ---
クリックで変更 乗せると変更 --- 例文 ---
クリックで変更： <A HREF="JavaScript:change_back('IMG/kogara_4511L.gif')"> <img src="IMG/kogara_4511L.gif" width="32" height="32"></A> 乗せると変更： <img src="IMG/kogara_4511L.gif" width="32" height="32" onMouseOver="change_back('IMG/kogara_4511L.gif')"> リセットボタン： <input type="button" value="リセット" onClick="change_back('')"> <SCRIPT LANGUAGE="JavaScript"> function change_back(,wIMG) { document.body.background = wIMG; } </SCRIPT>--- 解説 ---
クリックで変更の場合、<A>タグを使って、クリックしたときにスクリプトを呼び出し、背景に表示させたい画像のファイル名を送信しています。
乗せると変更の場合、<IMG>タグの中にマウスを乗せたときに対応するonMouseOverを使って、スクリプトを呼び出しています。
スクリプトでは受け取ったファイル名を表示中のHTMLファイルの背景として設定しています。--- 応用 ---
上記の例では背景のリセットにボタンを用意しましたが、マウスをどけると背景が元に戻るようにも設定できます。「onMouseOut="change_back('')"」を<IMG>タグ内に追加すれば空の画像が背景に設定されて元通りです。しかし、最初の背景に画像を使っている場合は、その画像を指定する必要があります。
スクリプトを次のように手直しすれば、空の文字列を送ると背景が元に戻るようにすることもできます。function change_back(,wIMG) { if (wIMG == "") wIMG = "default.gif"; //最初の画像を指定 else document.body.background = wIMG; //背景を切り替える }また、背景を変更すると文字が見難くなりますので、同時に文字色も変更してやると良いかも知れません。
下記スクリプトでは、背景色と文字色を変更しています。<a href="JavaScript:change_back('#777777','#FFFF00')" onMouseOver="JavaScript:change_back('#000000','#FFFFFF')" onMouseOut="JavaScript:change_back('','')">ここに・・・</a> function change_back(,wIMG,wText) { if (wIMG == "") wIMG = "#FEFEFE" document.bgColor = wIMG; if (wText == "") wText = "#000000" document.fgColor = wText; }リンクの色はdocument.linkColor、リンク中の色（IE非対応）はdocument.alinkColor、リンク済みの色はdocument.vlinkColorで設定できます。
){kind=small}
){kind=small}
){kind=small}
){kind=small}
一定間隔で画像を更新する
--- 実例 ---
--- 例文 ---
<img src="sushi2_ita.gif" name="sushi"> <script Language="JavaScript"> img = new Array("sushi2_ita.gif","sushi2_ikura.gif","sushi2_ebi.gif","sushi2_maguro.gif","sushi2_toro.gif","sushi2_uni.gif"); //*1 count = 0; //*2 refresh_img(); function refresh_img() { if (count == img.length) count = 0; //*3 document.sushi.src = img[count]; //*4 count++; setTimeout("refresh_img()",1000); //*5 } </script>--- 解説 ---
複数の画像を用意しておいて、一定間隔で変更します。
（*1）複数のファイルを配列変数imgに入れておきます。
（*2）変数countで表示する画像を選択します。
（*3）配列変数imgの要素の数が画像の数なので、変数countがその数に達したら０に戻します。要素の数が5個の場合、countは０〜４になるので、（要素と同じ）５のときは存在しない画像を選んでしまうことに注意が必要です。
（*4）画像を表示します。次の行でcountを１つ増やしています。
（*5）1秒後に同じ処理を繰り返します。1/1000秒単位で時間指定します。
--- 応用 ---
WEBカメラから送られてくるファイルが同じ名前で上書きされる場合のように、同じファイル名の画像を再読込し直したいときには少し工夫が必要です。
単純に同じファイル名を与えても画像を読み込まずキャッシュを読み込んでしまいます。
そこで、画像のファイル名に「?」を付けて後ろにデータを付け足すことで、画像のファイル名が変わったように見せかけるとうまく行きます。
実例 例文
（更新）
<img src="nnjcam.jpg" name="webcam"> （<span id="update"></span>更新） <script Language="JavaScript"> var img = new Image(); img.src = document.webcam.src; refresh_webcam(); //*1 function refresh_webcam() { var now = new Date(); document.webcam.src = img.src + "?" + now.getTime(); //*2; document.getElementById("update").innerHTML = now.getHours() + "時" + now.getMinutes() + "分"; //*3 setTimeout("refresh_webcam()",60000); //*4 } </script>（*1）ページの読込時に最初のタイマーを呼び出します。ページ読込後に呼び出したいときは、これを消して、<body>タグ内に「onLoad="refresh_webcam()"」と記述します。
（*2）画像のファイル名の後ろに処理中の時間をデータとして付けています。これによって画像のファイル名を違うものに見せかけて、新しく画像を読み込ませることができます。
（*3）画像を読み込んだ時間を表示します。
（*4）1分後に「refresh_webcam()」を呼び出しさせます。1/1000秒単位で時間指定します。
