■ 画像の入れ替え（ロールオーバー）の拡張

以前にコーディングしたロールオーバーのスクリプトを拡張したいと思います。メニュー用のボタンなどで、複数ページに渡って、同じものをつけたい場合がよくあります。その場合、市販のホームページ製作ソフトなどでは、テンプレート機能を使ってコーディングするわけですが、

例えば、

1. 自分自身のページへのリンクが張られている画像はロールオーバーさせたくない。
2. 自分自身のページへのリンクが張られている画像をすり替えたい。
3. 自分自身のページへのリンクは無効にしたい。

などの要求によって、テンプレート機能を効率的に利用することが難しくなることがあります。そこで、JavaScript を使って、HTML 部分は共通にして、先の要求を満たす方法を検討してみました。更に、以下の変更も行っています。

4. タブキーによるフォーカスの移動によってもロールオーバーする。
5. コードをオブジェクト化して、利用しやすくする。

使い方は、まず、メニューに使用する画像に、ロールオーバーを実装するための class 属性、ROLLOVER を指定します。また、先の要求を満たすためには画像を識別する必要があるため、それぞれの画像には別々の id を割り当てておきます。

次に以下のコードを挿入します。

<script type="text/javascript" src="rollover.js"></script>
<script type="text/javascript"><!--
var IRollover = new imageRollover("page1", true, false);
--></script>

オブジェクトのコンストラクタ imageRollover() における3つの引数は、１番目がロールオーバーを実装したくない画像の id、2番めが画像をすり替えるかどうかで、すり替える場合は true、すり替えない場合は false、3番目はリンクを無効にするかどうかで、無効にする場合は true、無効にしない場合は false を指定します。このコードはそれぞれのページに合わせた引数を指定して、挿入して下さい。

なお、使用する画像のファイル名は、元の画像が xxx.gif であれば、onMouseOver で入れ替える画像に xxx-over.gif という名前を付け、また、すり替え用の画像には xxx-self.gif という名前を付けてあるものとします。

■ サンプル

■ ソース