書式説明

１・動作概要
画面構成は下図のように、３つのフレームから成り立っています。

図１

まず、「index.html」で３つのフレーム区画（生成）を行っています。
フレーム１及びフレーム２には画像を使用したリンクボタンがあり、それぞれマウスのロールオーバーで違う画像に切り替わるような仕組みになっています。

さらに、フレーム１のボタン画像とフレーム２のボタン画像は片方のロールオーバー時に連動して画像が切り替わります。
また、ボタンをクリックする事でフレーム３のページはリンクされているページを表示しますが、同時にフレーム１，２のボタン画像がロールオーバーの状態を保持します。

２・それぞれのフレームのソース
【　index.html　】
index.htmlはフレームの分割生成を実行しています。以下はFRAMESET部分の抜粋です。

この中で、「name="frame1"」「name="frame2"」「name="frame3"」がそれぞれのフレーム名を表しています。
また、「src="frame1.html"」「src="frame2.html"」「src="frame3.html"」がそれぞれのフレームに表示されるを最初のファイル名です。

この中でフレーム名が重要な意味を持っており、以後のスクリプトの記述と関連しています。

【　frame1.html　】
frame1.htmlはフレーム１に表示されるページです。以下はその一部のソースです。

<SCRIPT type="text/javascript" language="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
<div align="center">
<br>
<small>
このフレームは「frame1.html」です。nameは「frame1」です。<br>
</small>
   <A href="link1.html"
     onmouseout ="change_image2(0)"
     onmouseover="change_image2(1)" target="frame3">
     <IMG SRC="link1_1.gif" NAME="link1" BORDER="0" WIDTH="79" HEIGHT="26" ALT="LINK1"
     onload="loadck()"></a>
   <A href="link2.html"
     onmouseout ="change_image2(0)"
     onmouseover="change_image2(2)" target="frame3">
     <IMG SRC="link2_1.gif" NAME="link2" BORDER="0" WIDTH="79" HEIGHT="26" ALT="LINK2"
     onload="loadck()"></a>
     <br>
   <small>
     フレーム１とフレーム２のボタンはMouseOver,Outに連動します。<br>
     ジャンプ後のページによりボタンは変更されたままになります。<br>
   </small>
</div>

■　link_max = 2: この部分はボタンによってリンクされるページの総数を指定しています。
ページ数が８ページならlink_max = 8という風になります。
■　if(navigator.appVersion.substring(0,1) >= 3): この部分は、ブラウザのバージョンを取得する部分でネットスケープナビゲーターやインターネットエクスプローラーのバージョンが３以上の場合に動作するようになっています。
それ以前のバージョンではスクリプトが対応していないための振り分けです。
特に変更は必要有りません。
■ img[0] = new Image(); img[0].src = "link1_1.gif"; img[1] = new Image(); img[1].src = "link1_2.gif"; img[2] = new Image(); img[2].src = "link2_1.gif"; img[3] = new Image(); img[3].src = "link2_2.gif";: ここは、ボタンイメージの先読みを所ですが、１つのボタンに対し、「通常」「ロールオーバー時」の順で２つが対になっています。
ボタンが増えた場合は4,5...6,7...8,9...という風に列記します。
■　function change_image(link_number): 画像を入れ替える部分の関数です。function change_image2から呼び出されます。
特に変更は必要有りません。
※重要部分
■　link_name = "link"+i;: ここで画像のＮＡＭＥ属性を生成（対応させるため）しています。
ここの"link"と１からlink_maxまでの数値の組み合わせが下記画像のNAME属性と対応しています。

<IMG SRC="link1_1.gif" NAME="link1" BORDER="0" WIDTH="79" HEIGHT="26" ALT="LINK1" onload="loadck()"></a>

このNAME属性と間違いなく連動するよう"link"部分を一致させていなければなりません。
ボタン数が少ないときは問題ないのですが、多くなった場合でもスクリプトが汎用的に使用できるようこの様な処理をしています。
極端な話、ボタンが１００個有ってもスクリプト自体はlink_max=100の変更だけで済みます。
もちろんイメージの先読み部分は変更が必要ですが・・・
■　function change_image2(number): 画像ボタンのロールオーバーやロールアウトのイベントで呼び出される関数です。
numberを指定することで指定の画像と切り替えます。
特に変更は必要有りません。
■　top.frame2.change_image(number);: 他のフレームの画像切り替え関数を呼び出している部分です。
このframe2は重要で対応するフレーム名と一致させる必要が有ります。
例えばこのスクリプトの有るフレームは"frme1"ですが、"frame2"の関数を呼び出すときが上記のようになり、逆に frame2からframe1の関数呼び出しはtop.frame1.change_image(number); と言うように記述します。
■　function change_flg(flg): 飛び先のページ（frame3に表示されるページ）から呼び出される関数で、ロールオーバーの画像を保持するために link_numberが現在の表示ページの番号を保持しています。
このlink_numberは初期値０ですが各表示ページから変数flgによって変更されます。
特に変更は必要有りません。
■<A href="link1.html"
  onmouseout ="change_image2(0)"
  onmouseover="change_image2(1)" target="frame3">
  <IMG SRC="link1_1.gif" NAME="link1" BORDER="0" WIDTH="79" HEIGHT="26" ALT="LINK1"></a>: リンク先へのアンカー部分です。"link1.html"部分がリンク先のファイル名です。
onmouseout ="change_image2(0)"部分の変更は有りません。
onmouseover="change_image2(1)"の（　）内の数値が、リンク先のページ番号に対応しています。ここはロールオーバーの時の画像番号と違うので注意して下さい。
この例で行くと"link1"が"1"、"link2"が"2"、"link3"は"3"という風になります。
ロールオーバー時の画像との対応はスクリプト内で計算しているので考慮する必要はありません。

<IMG SRC="link1_1.gif" NAME="link1"
先の説明の通り、ここの"link1はNAME属性ですので、スクリプトとの連携がされています。 "link1","link2","link3"・・と言うようにリンク事の連番になっている必要があります。
また、画像名"link1_1.gif"はロールオーバーでないときの画像です。

【　frame2.html　】
frame2.htmlはフレーム２に表示されるページです。スクリプトはframe1.htmlと大差有りませんが、フレーム名の frame1、frame2部分の書き換えに注意して下さい。

【　frame3.html　】
frame3.htmlはフレーム３にデフォルトで表示されるページです。

<SCRIPT type="text/javascript" language="JavaScript">

</SCRIPT>
</HEAD>
<BODY onLoad="change()">
<div align="center">
  <br><br>
  <small>
  このフレームは「frame3.html」です。nameは「frame3」です。<br>
  <br>
  現在はデフォルトの画面です。<br><br>
  ブラウザの「戻る」で戻ってきた場合に画像がリンク先のままの状態であるのを<br>
  解除するため、表示の際１度だけスクリプトをダイレクトで呼び出しています。<br>
  </small>
<SCRIPT type="text/javascript" language="JavaScript">

</SCRIPT>

■　function change(): フレーム１，２にある関数をそれぞれ呼び出す関数です。
注意としてframe1及びframe2が呼び出す部分のフレーム名となるようにして下さい。
■　<BODY onLoad="change()">: 初期状態を設定するために呼び出す部分です。画像を初期化（ロールアウトの状態）します。
■　change();: <SCRIPTをダイレクトに記述することでブラウザの戻るボタンで戻った状態でボタン画像がロールオーバーの画像のままになっているのを解除するために関数を呼び出しています。
特に変更はありません。

【　link1.html～　】
link1.htmlはフレーム３に表示されるリンク先のページです。ファイルは複数存在します。

<SCRIPT type="text/javascript" language="JavaScript">

</SCRIPT>
</HEAD>
<BODY onLoad="change()">

■　function change(): frame3.htmlと同じ関数ですが、change_flg(1)の（　）内の数値に注意して下さい。
この数値はこのページのリンク先番号（リンクページ事の連番）になっています。
例えば"link1.html"は(1),"link2.html"は(2)と言う具合です。
リンクページの連番はframe1.htmlの項を参照して下さい。
■　<BODY onLoad="change()">: frame3.htmlと同様でページがロードされたときに画像を変更する関数の呼び出し部分です。
特に変更はありません。