設置の際、多少戸惑うことがあるやもしれませんので、少しプログラムの解説をします。

まず始めのこの部分ですが、画像をあらかじめ読み込んでいます（*この読み込みと言う作業をするとオンライン上でもイメージの変更がスムーズに行えます）。 "../_image/card/0.gif"や"../_image/card/1.gif"などがその読み込んでいる画像で、 Image Changeで使いたい画像を予めここで登録しています。登録した画像には それぞれ番号が振り分けられているのが分かると思います(imgs[2]など)。 この番号がその画像の識別番号となります。 例えば、使いたい画像を増やしたい場合は、上のスクリプトの続きに、

と識別番号を一つずつ繰り上げながら、画像を登録して行く事により 増やすことが出来ます。減らす場合はその逆の手順を行えばＯＫです。

次に、変更する画像の<IMG>タグです。 変更対象の<IMG>タグには必ず、name を付けてください。 nameは好きな名前で構いません。 また変更対象の<IMG>タグを複数設置する場合、 それぞれのnameが被らないように（同じnameを付けないように）して下さい。 このNameを利用してその<IMG>タグの画像を変更します。

ハイパーリンクタグです。このリンクに挟まれた部分に触れることにより、 画像の変更を行います。（*Image Changeのサンプルでは、リンクの部分に変更対象の<IMG>タグを置いていますが、別に<IMG>タグをリンクの間に置く必要はありません。 例え、ページの離れたところに設置していても、nameの指定さえしていれば、 どこからでも変更出来ます）。さて、ハイパーリンクタグの中身を少し取り出して説明します。

ハイパーリンクタグの中身です。画像を変更するハイパーリンクタグの中身には必ず、 この２つ（onMouseOver="..."とonMouseOut="..."）を書いてください。 onMouseOverはマウスがリンクに触れたときの挙動、onMouseOutはリンクから離れた時の挙動を指します。

onMouseOverの中身の chgimg('img1',1) の 'img1'の部分は、先程あげた <IMG> タグのnameを指しています。 また２つめの太字の部分、1 の数字は、この解説一番始めに挙げた、 imgs[識別番号] = "...." の識別番号を指しています。 つまりこのリンクに触れた時、<IMG name="img1">タグの画像を imgs[1]（先程の例で言うなら"../_image/card/1.gif")の画像に変更するという 意味になります。

onMouseOutの場合も同様で、chgimg('img1',0) は、 マウスがリンクから離れた時、 <IMG name="img1">タグの画像をimgs[0]（"../_image/card/0.gif")の 画像に変えるという意味を持っています。 この"0.gif"という画像は<IMG name="img1">タグの元々の画像ですから、 見た目的には元に戻ったという感じになります。

ちなみに識別番号がなんやらよく分からないという方は、

と番号の代わりに、画像のパスを直接書くことも出来ます。 こっちの方が分かりやすいかもしれませんね。