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

■ スワップイメージ機能（画像の入れ替え）を行う

ロールオーバーではマウスをポイントした画像が変化しましたが、スワップイメージでは別の場所の画像の入れ替えを行います。サンプルでは、フルーツ写真の拡大画像を表示していますが、ポイントした内容の紹介文を表示するなどの用途に利用できます。

サンプルスクリプト

○ フルーツ画像にマウスをポイントすると、拡大画像が表示されます。

	☆フルーツ紹介 ☆

スクリプトの説明

サンプルでは、小さい画像をポイントしたときに、その画像の拡大画像を表示しています。このスクリプトでは、見出し用の小さい画像と、拡大表示用の大きな画像の2枚を用意しておきます。

「りんご」の場合では、見出し用として「apple_caption.jpg」を、拡大表示用として「apple.jpg」を用意しています。このようにマウスポイント部分の画像は変更せずに、違う場所の画像を変更することで様々な効果を表現できます。

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

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

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

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

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

<関数の呼び出し部分>

SwapImage( img )

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

[ SwapImage 関数の内容 ]

function Swapimage (img) {
obj = document.getElementById("image");
obj.src = img;
}

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

▲TOPへ


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