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

JavaScript 入門編

JavaScript 活用編

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

人気サイトランキング


   HOME >> JavaScript 活用編 >> スワップイメージ(画像の入れ替えを行う)
■ スワップイメージ機能(画像の入れ替え)を行う

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



サンプルスクリプト

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

  ☆フルーツ紹介 ☆  
りんご いちご レモン オレンジ ぶどう
バナナ さくらんぼ いちじく メロン 桃
フルーツ紹介


スクリプトの説明

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

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

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


[ 関数の呼び出し部分 (サンプルスクリプトの1番目) ]
<img src="./img/apple_caption.jpg"
  onmouseover="SwapImage('./img/apple.jpg');">
黄色の部分がイベントハンドラ、青色の部分が関数の呼び出し部分になります。


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

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


<関数の呼び出し部分>

SwapImage( img )

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



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





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