色の変わるメニュー項目 改良版

Netscapeのバージョンチェックともう1つのプロパティ参照方法

アクティブ三角(?)の改良版を作ります。
ヴィア・デュック地区
エリゼ宮
マドレーヌ寺院
アンヴァリッド
シテ島
改良点は、マウスカーソルがどの項目にも載っていない時はすべての三角が黄色に なるようになったところです。また、エラーを起こすMSIEやNetscape 2.0のときは、 このスクリプトが動かないようにしています。 
<SCRIPT LANGUAGE="JavaScript">
<!-- Code hiding from here
function In(n) {
	if (NNCheck(3)) {
		document.images["tri" + n].src = "trir.gif";
	}
}

function Out(n) {
	if (NNCheck(3)) {
		document.images["tri" + n].src = "triy.gif";
	}
}

function NNCheck(version) {
	if ((navigator.appName.indexOf("Netscape") >= 0)
          && (version <= parseInt(navigator.appVersion.substring(0, 3)))) {
		return true;
	} else {
		return false;
	}
}
// end -->
</SCRIPT>

<A HREF="viaduc.html" OnMouseOver="In(1)" OnMouseOut="Out(1)"><IMG SRC="triy.gif" NAME="tri1" BORDER="0">ヴィア・デュック地区</A><BR>
<A HREF="elysee.html" OnMouseOver="In(2)" OnMouseOut="Out(2)"><IMG SRC="triy.gif" NAME="tri2" BORDER="0">エリゼ宮</A><BR>
<A HREF="madeleine.html" OnMouseOver="In(3)" OnMouseOut="Out(3)"><IMG SRC="triy.gif" NAME="tri3" BORDER="0">マドレーヌ寺院</A><BR>
<A HREF="Invalides.html" OnMouseOver="In(4)" OnMouseOut="Out(4)"><IMG SRC="triy.gif" NAME="tri4" BORDER="0">アンヴァリッド</A><BR>
<A HREF="cite.html" OnMouseOver="In(5)" OnMouseOut="Out(5)"><IMG SRC="triy.gif" NAME="tri5" BORDER="0">シテ島</A><BR>

onMouseOver, onMouseOutイベントハンドラ

色を変える必要があるのは、マウスカーソルがリンクに乗った時と リンクからカーソルが外れた時です。
この2つの時点でonMouseOverイベントハンドラとonMouseOutイベントハンドラ でイベントを捕捉できます。このスクリプトでは、
OnMouseOver="In(2)" ← マウスが入ったらIn(2)を実行
OnMouseOut="Out(2)" ← マウスが出たらOut(2)を実行
としています。

配列形式の参照

関数In()もOut()もほどんど中身は一緒です。 画像をすり替えるために、 
document.tri1.src='triy.gif'
            ~
にょろ(~: ほんとはチルダって言うんでしたっけ)の部分を引数で渡した数にしたいので、前回はeval()関数を使って この文を生成していました。

JavaScriptではプロパティの参照を配列参照のように行なうこともできます。 document.images[0]とするとそのページに含まれる最初の画像(Imageオブジェクト) を参照し、2番めの画像はdocument.images[1]として参照できます。 

<IMG SRC="trir.gif" NAME="tri3">
また、上の例のようにNAMEアトリビュートで名前をつけていれば、この画像は 
document.images["tri3"]
として参照できます。3の部分を引数で渡した変数nに置き換え、 
document.images["tri" + n].src = "trir.gif";
これでevalを使わずに同じ処理ができました。

バージョンチェック

ImageオブジェクトはNN 3.0以降のJavaScriptで利用でき、NN 2.0ではエラーが 出てしまいます。また、イソターネットエクスプローラーではこのスクリプトで 使った配列形式の参照がうまく機能せず、やはりエラーになってしまいます。 NN 3.0以降で実行した時のみTrueを返す関数を用意し、NN2.0やイソターネット エクスプローラーではFalseを返しスクリプトを実行しないようにしておきます。

この機能は関数NNCheck()で実現します。