..

JavaScriptの入門とサンプル集
■JavaScript入門−画像・テキスト編−画像を入れ替える　　　　　■戻る　　　　　■次へ　　　　　■Home
■マウスを重ねると画像が入れ替わる

　ここでは、JavaScriptで画像を扱ってみましょう。
　まずは、裏を向いたカードにマウスを重ねると表になる簡単なサンプルプログラムを見てみましょう。
　　　　　　

<html>
<head>
<title>画像が入れ替わる処理</title>
</head>

<body>

<img src="card_ura.gif" onMouseover="this.src='card_omote.gif'" onMouseout="this.src='card_ura.gif'");

</body>
</html>

 〜sample9.html〜のリスト

今回はタグ内にJavaScriptを標記するので<script>タグは
使いません。



「onMouseover」と「onMouseout」はイベントと呼ばれ、それぞれこのイメージにマウスが重なった時と、離れた時に実行する処理を「="〜"」に指定しています。
「this」とはこのイメージ自信のオブジェクトを示し、「src」プロパティ（画像のファイル）を変えることで画像を入れ替えています。
ご自身のＰＣで入力される場合は以下の画像ファイルを右クリックでHTMLファイルと同一フォルダの中に保存してください

 card_ura.gif
card_omote.gif

【参照】イベント
【参照】プロパティ

　　　■sample9.htmlを実行する

sample9.htmlの実行画面


◇画像をJavaScriptで制御する

　JavaScriptで画像オブジェクトを制御するには、画像に名前をつけたり、出現順にふられる参照番号でその対象を指定します。
★画像をJavaScriptで制御する方法

　◇HTML

　　　　　<img src="画像のファイル" name="画像の名前">

　◇JavaScript

　　　　　document.画像オブジェクト.プロパティ

　画像オブジェクトの部分は、<img>タグの「name」属性で指定した画像の名前の他、下記のような方法で指定することができます。
　　　images[参照番号]（ページ先頭からの画像数で０からの通し番号）
　　　images["画像名"]
※無料サーバーなどでページに広告が挿入された場合は参照番号が変わるので期待通りに動作しないので注意しましょう。


　それではこれらを使って、サムネイル画像にマウスを重ねると拡大された画像が表示されるプログラムを見てみましょう。


《「document.画像の名前.プロパティ」を使った場合のサンプルプログラム》

<html>
<head>
<title>サムネイル表示</title>
</head>

<body>

<img src="sample10_1.jpg" name="bigScr">
<br><br>
<img src="sample10_1.jpg" width=64 height=48 onMouseover="document.bigScr.src='sample10_1.jpg'">
<img src="sample10_2.jpg" width=64 height=48 onMouseover="document.bigScr.src='sample10_2.jpg'">
<img src="sample10_3.jpg" width=64 height=48 onMouseover="document.bigScr.src='sample10_3.jpg'">

</body>
</html>

〜sample10.html〜のリスト

今回はタグ内にJavaScriptを標記するので<script>タグは
使いません。




大きな画像に「bigScr」という名前をつけています。

サムネイルの画像なので、「width（幅）」と「height（高さ）」
を設定して画像を小さくしています。
「onMouseover」イベントが発生すると「document.画像の
名前.src」を使って画像を入れ替えます。
ご自身のＰＣで入力される場合は以下の画像ファイルを右クリックでHTMLファイルと同一フォルダの中に保存してください

sample10_1.jpg
sample10_2.jpg
sample10_3.jpg

【参照】イベント


《「document.images["画像の名前"].プロパティ」を使った場合のサンプルプログラム》

<html>
<head>
<title>サムネイル表示２</title>

<script language="JavaScript"><!--
function bigImage(imageName,imageFile)
{
   document.images[imageName].src=imageFile;
}
//  --></script>

</head>

<body>
<img src="sample10_1.jpg" name="bigScr">
<br><br>
<img src="sample10_1.jpg" width=64 height=48 onMouseover="bigImage('bigScr','sample10_1.jpg')">
<img src="sample10_2.jpg" width=64 height=48 onMouseover="bigImage('bigScr','sample10_2.jpg')">
<img src="sample10_3.jpg" width=64 height=48 onMouseover="bigImage('bigScr','sample10_3.jpg')">

</body>
</html>

〜sample11.html〜のリスト




関数「bigImage()」の設定
引数で引き渡されたイメージネームの「src」プロパティを
イメージファイルに置き換える処理をします。

【参照】関数





大きな画像に「bigScr」という名前をつけています。

サムネイルの画像なので、「width（幅）」と「height（高さ）」
を設定して画像を小さくしています。
「onMouseover」イベントが発生すると「bigImage()」という関
数を呼び出して画像を入れ替えます。
ご自身のＰＣで入力される場合は以下の画像ファイルを右クリックでHTMLファイルと同一フォルダの中に保存してください

sample10_1.jpg
sample10_2.jpg
sample10_3.jpg

【参照】イベント

　　　■sample11.htmlを実行する


sampe10,11.htmlの実行画面

..
■JavaScript入門−画像・テキスト編−画像を入れ替える　　　　　■戻る　　　　　■次へ　　　　　■Home

..