はじめに
今回は、動的な画像の入れ替え(いわゆるロールオーバー効果)を行うスクリプトを作成していきます。 DHTML的動作の基本的なものですね。 ここでは、画像を入れ替える効果の基本的なスクリプトを挙げ、その次に応用として多数のイメージを動的に入れ替え、紙芝居調に展開させるいわゆるスライドショーを実装するスクリプトを検討します。
と、ここでDHTMLという言葉をわざとらしく使用したので、その点についてちょっと触れておきますね。 通常、ブラウザに表示されるHTML文書の内容は、静的な表示になります。 つまり、ページのロードが終了した場合、そのページのレイアウトや内容が動的に変化することは通常はありません。 しかし、JavaScriptを利用すれば、本来静的な表示を操作して、動的にすることもできるようになっています。 この、本来は静的な表示しかされないHTMLを、JavaScriptを利用することで表示を動的(ダイナミック)に操作するようにしたものが、DHTML的ページ、ということになります。 ちなみに、DHTMLは、Dynamic HyperText Mark-up Languageの略です。 なお、DHTMLはスタイルシートを利用することで表示を制御する手法が(おそらく)主流としてありますが、こちらのスクリプトで作るDHTML的動作はそちらとは少々勝手が異なりますので、その点には一応注意しておいて下さい。
では、本題にいきましょう。
基本スクリプト
まず、JavaScriptを利用して画像を差し替える方法について触れておきましょう。 基本的なところから噛み砕いた説明をしますが、HTMLで画像を表示させる方法としては、普通は<img>要素を利用します。 このとき、<img>要素にはsrc属性という、画像ファイルを特定するファイルが記述されます。 このsrc属性がそこに表示する画像ファイルのURIを指定するわけです。 これを踏まえた上で見通すとわかりやすいと思いますが、JavaScriptで画像の差し替えを動的に行う場合、スクリプトでは画像を差し替える対象となる要素を特定し、その要素のもつsrc属性にアクセスします。 そして、そのsrc属性をJavaScriptで書き換えることによって、動的にその<img>要素中に表示される画像が置き換えられるようになっています。 では、この動作を実現させるためのスクリプトの記述方法に触れます。
例1：document.door.src="door2.png";例2：document.images[1].src="b_off.png";
さて、核心となるスクリプトの書き方を2通り上げてみました。 これらのスクリプトが行う処理自体は双方ともに「特定の要素のsrcプロパティを書き換える」という動作で、まったく同じものです。 これらの違いは、画像を置き換える要素の特定をする方法です。
例1の方法ですが、これはあらかじめ画像のロールオーバーを行う<img>要素に、name属性ないしid属性で特定の名前をつけておく必要があります。 ここでつけられた特定の名前は、その要素の識別子として利用されることになります。 こちらの方法では、画像を動的に変更したい要素を「document.識別子」で特定しています。 こちらの例は、ロールオーバーを適用する箇所が少ない場合には便利です。
例2の方法についてですが、JavaScript1.2のバージョン以降では、HTML内の<img>要素を、ページがロードされたときに自動的に配列として取得するようになりました。 たとえば、そのページ内に4枚の画像が含まれていた場合、その<img>タグが記述された早い順からimages[0]、images[1]、images[2]、images[3]という配列内に、それぞれの要素が自動的に格納されます。 例2は、それを利用した記述です。 この場合は、images配列を配列番号と合わせて指定することで、対象となる<img>要素を特定します。 こちらの記述は、同じようなロールオーバーを適用する箇所が多数ある場合に特に有効です。
ちなみに、例1のケースはこのサイトのトップページの入り口のドア、例2のケースはこのサイトのインデックスページでコンテンツ表のリンクの横にあるボタン風画像の、それぞれのところで利用している記述方法だったりします。
ページへの実装
さて、前項では基本となる処理の記述の仕方を解説しました。 しかし、これはそのまま記述してもロールオーバーにはなりません。 画像を差し替える条件を規定して、その条件が適合したときにスクリプトが処理されるようにする必要があります。 そのためには、まずロールオーバー処理が特定のアクションに対して応答する形で処理されるように、前項のスクリプトをまず関数として記述します。
例：
function cngImg(){
document.door.src="door2.png";
}
次に、関数は呼び出されなければ処理が行われないので、画像の置き換えを起こすためにはどこかからこの関数を呼び出す必要があります。 大抵のロールオーバー処理は、この処理を実行させるきっかけとして、イベントの取得を行います。 たとえば、画像をクリックしたときに画像を差し替えるとか、画像の上にポインタがきたときに画像を差し替えるとか、画像の上からポインタが外れたときに画像を差し替えるなど、閲覧者の特定のアクションをイベントとして取得し、それに呼応するように関数の処理を実行させる形をとります。
では、イベントの取得をどのようにするかについての話になりますね。 ここでは、特定の要素に対してイベントハンドラという、その要素に特定のアクションが起こされたときにJavaScriptの処理を実行する特殊な属性を追加することで、関数の処理を呼び起こす方法について解説します。
イベントハンドラ
イベントハンドラの概要については、上に書いたとおりです。 では、ロールオーバー効果の際に利用されうるイベントハンドラを、いくつか実際に例示していきます。
- onClick
- このイベントハンドラは、これが記述されている要素をクリックしたことをイベントとして拾い、それをトリガーとしてJavaScriptの処理を起動します。
- onMouseover
- こちらは、これが記述されている要素の表示領域(ボックス)内にポインタが乗ったことをイベントとして拾い、それをトリガーとしてJavaScriptの処理を起動します。
- onMouseout
- こちらは、これが記述されている要素の表示領域(ボックス)内にあったポインタが、表示領域外へと移動したことをイベントとして拾い、それをトリガーとしてJavaScriptの処理を起動します。
それぞれのイベントハンドラは、特定の要素の開始タグ内に属性と同様に記述し、その内容としてJavaScriptで行う処理の内容を記述しておきます。 処理内容は通常のJavaScriptと同様に記述できますが、今回はロールオーバー処理を記述している関数を呼び出すことになります。 なお、イベントハンドラは、同一要素内にいくつか同居させることも可能です。
例： <img src="***.jpg" onClick="cngImg()"> <img src="***.png" onMouseover="cngImg1();" onMouseout="cngImg2()">