イヌでもわかるJavaScript講座
|
イヌでもわかるJavaScript講座
|
|
Step.98 - カーソルが触れると画像を変更させる
|
サムネイル画像にマウスカーソルが触れると拡大画像を表示させます。 |
| Step テーマ ● onmouseover イベント ● document.images.src 画像変更 |
実行例
| ||||||||
リスト<script type="text/javascript"><!-- function myChgPic(myPicURL){ document.images["myBigImage"].src = myPicURL; } // --></SCRIPT> <TABLE> <TR><TD colspan="4" align="center"><IMG src="IMG_088.gif" width="320" height="240" name="myBigImage"></TD></TR> <TR> <TD><A href="javascript:void(0)" onmouseover="myChgPic( 'IMG_0141.gif' )"><IMG src="IMG_0141s.gif" width="100" height="75"></A></TD> <TD><A href="javascript:void(0)" onmouseover="myChgPic( 'IMG_0400.gif' )"><IMG src="IMG_0400s.gif" width="100" height="75"></A></TD> <TD><A href="javascript:void(0)" onmouseover="myChgPic( 'IMG_0667.gif' )"><IMG src="IMG_0667s.gif" width="100" height="75"></A></TD> <TD><A href="javascript:void(0)" onmouseover="myChgPic( 'IMG_0679.gif' )"><IMG src="IMG_0679s.gif" width="100" height="75"></A></TD> </TR> </TABLE> |
| サンプルだけの HTMLは こちらへ |
|
[Q] 画像にマウスカーソルをあてると別の場所に表示してある画像を変更したいのですが
[Ａ] 小さい画像にマウスカーソルが触れると、別場所に拡大画像が表示されるものを作ってみました。
使い方・小さい画像と大きい画像ファイルを準備します。 ・拡大画像を表示する<IMG>タグを設置します。 <IMG src="IMG_088.gif" width="320" height="240" name="myBigImage"> ・初期表示する拡大画像を指定します。src="" のように省略してはいけません。 ・縮小画像を表示する<IMG>タグを設置します。 <A href="javascript:void(0)" onmouseover="myChgPic( 'IMG_0667.gif' )"><IMG src="IMG_0667s.gif" width="100" height="75"></A> ・myChgPic( ) 内に マウスが乗った時に表示する 拡大画像 のファイル名(URL) を シングルクォートで囲って指定します。 説明縮小画像にマウスが乗ると myChgPic を呼ぶようにしました。パラメータには表示する拡大画像のファイル名 (URL) を指定します。 onmouseover = "myChgPic( 'IMG_0400.gif' )" myChgPic 内部の処理は、name 属性が myBigImage の <IMG>タグの画像を、パラメータでもらった画像ファイルに変更しただけです。 document.images["myBigImage"].src = myPicURL; document.images[] は画像オブジェクトの配列で、括弧 [ ] 内に <IMG>タグの何番目という数値指定をしますが、 <IMG>タグに name 指定があれば、 document.images["myBigImage"].src のように名前で直接指定することもできます。 マウスカーソルが離れたら拡大画像を元の初期画像に戻すのであれば、 <A href="javascript:void(0)" onmouseover="myChgPic('IMG_0667.gif')" onmouseout="myChgPic('IMG_088.gif')"> <IMG src="IMG_0667s.gif" width="100" height="75"> </A> のように <A>タグに onmouseout を追加します。 <A>タグ内 href の javascript:void(0) は何もしないということです。画像をクリックしてもリンクしない時に使います。 クリック時にどこかにリンクするのであれば、通常どおりにリンク先のURLを指定します。 拡大画像のサイズを変更するためには、 document.images["myBigImage"].width = myPicWidth; document.images["myBigImage"].height = myPicHeight; のような感じで myChgPic の仕様を変更すれば、よろしいかと。 document.images[ ] のプロパティは以下のものがあります。
参考ステップ Step.33 マウスカーソルが触れたらアイコン画像を変えてみましょう Step.66 サムネイル画像をポップアップを開いて拡大表示してみましょう Step.67 マウスカーソルが触れたらアイコン画像を変えてみましょう その２ Step.99 マウスカーソルが触れたら画像を変えてみましょう その3 Step.100 サムネイル画像にカーソルを合わせて拡大画像を表示してみましょう その3 |
Q&A 1[Ｑ] クリックすると画像が変わるようにしたいのですが
[Ａ] onmouseover を onclick に変更してください。
<A href="javascript:void(0)" onclick="myChgPic('IMG_0141.gif')"> <IMG src="IMG_0141s.gif" width="100" height="75"> </A> |
Q&A 2[Ｑ] クリック画像の枠を消したいのですが
[Ａ] <IMG>タグに border="0" を追加してください。
<A href="javascript:void(0)" onmouseover="myChgPic('IMG_0141.gif')"> <IMG src="IMG_0141s.gif" width="100" height="75" border="0"> </A> |
Q&A 3[Ｑ] マウスオーバーで表示した絵の下に説明文も表示したいのですが
[A] Step.44の innerHTMLを使って表示してみます。
|
実行例
| ||||||||
リスト<script type="text/javascript"><!-- function myChgPic(myPicURL,myComment){ document.images["idBigImage"].src = myPicURL; document.getElementById("idComment").innerHTML = myComment; } // --></script> <TABLE> <TR><TD colspan="4" align="center"> <IMG src="IMG_088.gif" width="320" height="240" name="idBigImage"><BR> <DIV id="idComment">どっかの湖の鯉</DIV> </TD></TR> <TR> <TD><A href="javascript:void(0)" onmouseover="myChgPic( 'IMG_0141.gif' , '原尻の滝' )"><IMG src="IMG_0141s.gif" width="100" height="75"></A></TD> <TD><A href="javascript:void(0)" onmouseover="myChgPic( 'IMG_0400.gif' , '熊野磨崖仏' )"><IMG src="IMG_0400s.gif" width="100" height="75"></A></TD> <TD><A href="javascript:void(0)" onmouseover="myChgPic( 'IMG_0667.gif' , '耶馬渓橋' )"><IMG src="IMG_0667s.gif" width="100" height="75"></A></TD> <TD><A href="javascript:void(0)" onmouseover="myChgPic( 'IMG_0679.gif' , '競秀峰' )"><IMG src="IMG_0679s.gif" width="100" height="75"></A></TD> </TR> </TABLE> 説明myChgPic()の第2パラメータに説明文の文字列をセットするようにしました。 function myChgPic(myPicURL,myComment)
説明用に用意しておいたDIVタグ内を上書きします。 document.getElementById("idComment").innerHTML = myComment;
↓<DIV id="idComment">どっかの湖の鯉</DIV>
|
 |
