MISTY-NET JavaScript講座 HOME / ご利用について / リンクに関して / 推奨環境 / 免責・規約 / お問合せ / リンク集 / Q&A
安心・高速・低価格!ホスティングサービスはミスティーネットへ!

JavaScript 入門編

JavaScript 活用編

ラブラブメールでツーショット

人気サイトランキング


   HOME >> JavaScript 活用編 >> ロールオーバー(画像の入れ替えを行う)
■ ロールオーバー(画像の入れ替え)を行う

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



サンプルスクリプト

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


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



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





スクリプトの説明

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


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


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


[ 関数の呼び出し部分 (サンプルスクリプトの1番目) ]
<img src="./img/rollover01a.gif" width="147" height="60" alt="" border="0"
  onmouseover="RollOver(this, './img/rollover01b.gif');"
  onmouseout="RollOver(this, './img/rollover01a.gif');">
黄色の部分がイベントハンドラ、青色の部分が関数の呼び出し部分になります。


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

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

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


<関数の呼び出し部分>

rollOver( obj, img )

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

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



[ rollOver 関数の内容 ]
function RollOver (obj,val) {
  obj.src = val;
}
src プロパティを使用すると、画像URLの参照及び設定を行うことが出来ます。





Copyright (C) since 2004 有限会社ミスティーネット All Rights Reserved .