それでは、このアイコンを表示するJavaScriptを簡単に説明します。
（すぐに使用したい！と、おっしゃる方は読み飛ばして頂いて結構です）
このアイコンを作成する為にはJavaScriptのイベントハンドラonMouseOut、onMouseOver、onClickとImageオブジェクトを使用します。
しかし、Imageオブジェクトでは、これらのイベントハンドラはサポートされていませんので、イベントハンドラをLinkオブジェクト内に置く必要があります。
各イベントを上のアイコンを例に説明すると、onMouseOutは、アイコン以外の位置にマウスカーソルがある状態（sample1.gif)を示します。
onMouseOverは、アイコンが選択された（マウスカーソルがアイコンの上にある）状態（sample2.gif）です。
最後のonClickはアイコンがクリックされた時の状態（sample3.gif）です。
これらのイベントハンドラは先ほども書きましたように、Imageオブジェクトではサポートされていない為、Linkオブジェクト内に置きます。
Linkオブジェクト内にこれらのイベントハンドラを置き、各イベントごとのアイコンを表示する為には<img>タグ内にname="名前"の様に記述し、アイコン部分に名前を付けます。
例：<img name="IconName" src="sample1.gif" width="88" height="31" alt="アイコン">
こうすることで、このアイコンには「IconName」という名前が設定され、初めに表示されるアイコンはsample1.gifが設定されます。
次に、Linkオブジェクト内に各イベントハンドラを設定します。これは、
<a href="リンク先" onMouseOut="document.images['名前'].src='ファイル名';"・・・>リンク先のページ名等</a>
のように、リンクタグ内に各イベントハンドラを置きます。
ここで、出てきたdocument.imagesとは、任意の画像を呼び出すJavaScriptでsrc=で指定したアイコンが表示されます。
なんか、ごちゃごちゃとしてきましたが、何と無くお分かり頂けましたでしょうか・・・・？
もう少しわかりやすくする為に、一番上で紹介したサンプルを作成するスクリプトのソースを見てみましょう。
ただ、上のサンプルは指定したページにはジャンプしない様になっていますので、ここでは、ICON's Worldのトップページにジャンプする様に作成します。
例：
<!---------Linkオブジェクト--------->
<a href="http://www.tiki.ne.jp/~page/icon/"
onMouseOut="document.images['icon'].src='sample1.gif';"
onMouseOver="document.images['icon'].src='sample2.gif';"
onClick="document.images['icon'].src='sample3.gif';">
<!---------Imageオブジェクト--------->
<img name="icon" src="sample1.gif" width="88" height="31" border="0"></a>
これで
の完成です！
このスクリプトでは、次のようなことを意味しています。
Linkオブジェクトの「href=」、これは通常のHTMLのリンク（アンカー）タグで使用するものと全く同じです。例ではhttp://www.tiki.ne.jp/~page/icon/へのリンクをあらわしています。
次の「onMouseOut="document.images['icon'].src='sample1.gif';"」は、マウスカーソルがアイコン以外の場所にある時にはsrc=で指定しているsample1.gifを表示する。ということです。
同様に「onMouseOver="document.images['icon'].src='sample2.gif';"」は、マウスでアイコンを触った時には、sample2.gifを表示する。
「onClick="document.images['icon'].src='sample3.gif';">」は、クリックした時にはsample3.gifを表示する。
また、各行に書かれている「document.images['icon']」は、iconという名前のついたオブジェクトを各アイコン（イメージ）に置き換えることを意味しています。
例ではImageオブジェクト
<img name="icon" src="sample1.gif" width="88" height="31" border="0">
のname="icon"で、名前を「icon」にしていますので、この様になります。
残りは、通常のHTMLの<img>タグの指定です。
src=は、読み込む画像sample1.gifを指定、width="88"は幅を88ピクセルに、height="31"は高さを31ピクセルに指定、border="0"は、リンク時の周りの枠を「0（消す）」の意味ですね。
と、まあ全体の流れはこのような感じです！
例のようなアイコンを作成する際に注意しなければならないのは、<img name>で指定した名前と、各イベントハンドラのdocument.images['名前']で指定する名前を統一する事だけです！
あと、例では分かりやすくする為に改行を入れていますが、実際にHTML内に記述する時には一行にまとめて書いた方が良いかもしれませんね。
| 
