![]() |
![]() |
![]() | |
![]() |
HOME / ご利用について / リンクに関して / 推奨環境 / 免責・規約 / お問合せ / リンク集 / Q&A | ||
![]() | |||
![]() |
![]() ![]() ![]() ![]() |
![]() |
HOME >> JavaScript 活用編 >> ロールオーバー(画像の入れ替えを行う) ■ ロールオーバー(画像の入れ替え)を行う
サンプル1.マウスが通過すると文字が光ります ![]() サンプル2.マウスが通過すると文字がへこみます ![]() サンプル3.応用編:マウスをクリックするとボタンがへこみます ![]()
サンプル1のロールオーバーでは、マウスカーソルが画像の上へ来たときに、「rollover01b.gif」に画像を変更しています。 また、マウスカーソルが画像から離れたときには、「rollover01a.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 .
|
![]() |
![]() |