![]() |
![]() |
![]() | |
![]() |
HOME / ご利用について / リンクに関して / 推奨環境 / 免責・規約 / お問合せ / リンク集 / Q&A | ||
![]() | |||
![]() |
![]() ![]() ![]() ![]() |
![]() |
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 .
|
![]() |
![]() |