有限会社ミスティーネット JavaScript講座

■ ロールオーバー（画像の入れ替え）を行う

ロールオーバーとは、マウスが画像や文字の上を通過する際に画像や文字のスタイルを切り替える機能です。この機能によって、文字が光ったり、ボタンがへこんだりする効果を表現することが出来ます。

サンプルスクリプト

サンプル１．マウスが通過すると文字が光ります

サンプル２．マウスが通過すると文字がへこみます

サンプル３．応用編：マウスをクリックするとボタンがへこみます

スクリプトの説明

サンプル1のロールオーバーでは、マウスカーソルが画像の上へ来たときに、「rollover01b.gif」に画像を変更しています。また、マウスカーソルが画像から離れたときには、「rollover01a.gif」に変更して画像を戻します。
このように表示画像を違う画像と変更することで様々な効果を出しています。

マウスオーバー時の画像 rollover01a.gif		マウスアウト時の画像 rollover01b.gif
	→

マウスの動作を検出するためには「onmouseover」と「onmouseout」のイベントハンドラを使用します。イベントハンドラとは、マウスのクリックなどのアクションを JavaScript で検出するためのものです。
サンプル1では、イベントハンドラ「onmouseover」を使って、画像を変更する関数「rollOver」を呼び出しています。

[ 関数の呼び出し部分 (サンプルスクリプトの1番目) ]

黄色の部分がイベントハンドラ、青色の部分が関数の呼び出し部分になります。

<使用するイベントハンドラ>

onmouseover
マウスカーソルがオブジェクトの上にポイントされた際に処理を行います

onmouseout
マウスカーソルがオブジェクトから離れた際に処理を行います

<関数の呼び出し部分>

rollOver( obj, img )

obj ･･･画像を変更するオブジェクト名を入力します
img ･･･変更したい画像オブジェクト名を入力します

* ここではスクリプトを簡略化するため、オブジェクト名に「this」を使用しています。

[ rollOver 関数の内容 ]

function RollOver (obj,val) {
obj.src = val;
}

src プロパティを使用すると、画像URLの参照及び設定を行うことが出来ます。

▲TOPへ


	HOME / ご利用について / リンクに関して / 推奨環境 / 免責･規約 / お問合せ / リンク集 / Ｑ＆Ａ