色の変わるメニュー項目

eval関数とimageオブジェクト

下のメニュー項目のどれかにマウスカーソルを持っていくとその項目の三角形の色が 赤に変わります。なかなか気持ちよくて気に入っているのですがいかがでしょうか？
ヴィア・デュック地区
エリゼ宮
マドレーヌ寺院
アンヴァリッド
シテ島
三角形の色が変わったように見えますが、 赤い三角と黄色い三角を使って 画像をすり替えているだけです。 大きさと形を揃えてあるので色が変わったように見えます。 
<SCRIPT>
function s(n) {
	for (i = 1; i <= 5; i++) {
		if (n == i) {
			doc = "trir.gif"
		} else {
			doc = "triy.gif"
		}
		eval("document.tri" + i + ".src='" + doc + "'")
	}
}

</SCRIPT>

<A HREF="viaduc.html" OnMouseOver="s(1)"><IMG SRC="triy.gif" NAME="tri1" BORDER="0">ヴィア・デュック地区</A><BR>
<A HREF="elysee.html" OnMouseOver="s(2)"><IMG SRC="triy.gif" NAME="tri2" BORDER="0">エリゼ宮</A><BR>
<A HREF="madeleine.html" OnMouseOver="s(3)"><IMG SRC="triy.gif" NAME="tri3" BORDER="0">マドレーヌ寺院</A><BR>
<A HREF="Invalides.html" OnMouseOver="s(4)"><IMG SRC="triy.gif" NAME="tri4" BORDER="0">アンヴァリッド</A><BR>
<A HREF="cite.html" OnMouseOver="s(5)"><IMG SRC="triy.gif" NAME="tri5" BORDER="0">シテ島</A><BR>
各項目の先頭についている三角形にはtri1, tri2, ...という名前をつけておきます。 Imageオブジェクトには、マウスが乗っかったというイベントに対応するもの(onMouseOver)がありません。そこで、画像と文字列をハイパーリンクとして<A HREF="...">〜</A> の中に入れ、このリンクのOnMouseOverイベントハンドラを使います。

マウスカーソルが項目に乗ると関数s()が呼ばれます。それぞれ、自分に対応する番号を 引数として渡すように書いてあります。 たとえば、s(3)のときは 

document.tri1.src='triy.gif'
document.tri2.src='triy.gif'
document.tri3.src='trir.gif' ←ここだけ違う
document.tri4.src='triy.gif'
document.tri5.src='triy.gif'
というように画像を設定すればいいわけです。 forループを使って処理したいところですが、tri1, tri2, ...はオブジェクト名で すから変数のようにオブジェクト名を順番に変えていくことはできません。

こんなときに使うのがeval()関数です。eval()は引数で与えた文字列をJavaScript のスクリプトとして実行します。 

eval("document.tri4.src='triy.gif'")
のように実行したいスクリプトの文字列を作ってしまえばいいわけです。 書き換える部分を考慮して文字列を作ると 
"document.tri" + i + ".src = '" + filename + "'"
のようになります。
マウスカーソルが出ていったときのOnMouseOutイベントハンドラを使えば、 もっときれいに書くことができそうです。