超簡単 !マウスを乗せるだけで 絵を切り替える方法


今商業サイトでは「標準の大きさ」の画像一枚に「小さなサムネイル」を数枚付け、サムネイルの上に
マウス(のカーソル)が乗りますとサムネイルの小さな画像が標準の大きな画像に切り替わる手法が
流行ってきております。
私たち個人でもそれが出来ないものかと思い、色々調べましたら割と簡単に出来る事がわかりましたので
何種類かの作り方を発表させて頂きます。
サンプルの写真には何の意味もありません。このサイトを作る為に急遽撮影したものです。
謝辞 このサイトを作るに当たりまして出版物の資料には誤りがあり、諸先輩のサイトの資料等を
   参考にさせて頂きました。有難う御座いました。


1.サムネイルの画像を標準(拡大)画像に切り替える方法


左下のサムネイルの上にマウス(のカーソル)を持って
行って下さい。画像が変わります。

@は標準の方法です。

Aはサムネイルの画像と切り替わる画像を違えてみました
 この方法は技術的には可能というだけで、見る人が
 まごつきますので、使わない方が良いと思います。

Bはサムネイルを画像で無く、文字にしてみました。

Cはマウスが乗った時と離れた時に別々の動作を
 させてみました。


バラ
   @        A        B         C




2.同一画像のエリアで画像を切り替える方法




左のサンプルは マウスのカーソルが画像の上に乗ると
別の画像を表示します。

更に(左り)クリックをしますと、もう一度画像が変わります。

マウスのカーソルを画像のエリア外に持って行きますと
最初の画像に戻ります。






3.文字に含まれた画像を表示する方法


中秋の今日庭を歩きました
もう既に花木の盛りは過ぎてしまい少ししか
残っていませんでした。

その中の幾つかを紹介させて頂きます。

コスモス  ダリア  バラ  柿の実

花の名前の上に「マウスのカーソル」
もって来ますと写真が表示されます。
最初の写真は無花果です。

実際の使用方法としましては「大相撲48手」の
「技の名前」と解説文に適していると思います。

この方法はサムネイルを並べるよりも少ないスペースで実施出来ます。



4.標準的な「マウスオーバー」の作り方
 先ず三種類の画像ファイルを準備します。
 その1 標準(拡大)の画像を表示するファイル。  gazou/01.jpg
 その2 切り替えて表示する画像ファイル。    
gazou/21.jpg
 その3 サムネイルに表示する為の(画像)ファイル。gazou/31.jpg
    二番目の画像ファイルを流用する事も出来ます。厳密には「文字」や「ボタン」等でも可能です。




1.標準の画像を表示します。
<IMG src="
gazou/01.jpg" width="320" height="240" border="0"


2.その画像を表示するプログラムに standard1 と言う名前を付けます。
<IMG src="
gazou/01.jpg" width="320" height="240" border="0" name="standard1">




3.サムネイルの画像を表示します。<IMG src="gazou/31.jpg" width="128" height="96" border="0">

4.そのプログラムの手前に「マウスオーバー」のプログラムを書き加えます。
 ここで使用します画像ファイルは切り替えて表示する為の物です。

<A href="javascript:void(0)" onmouseover="sum1( '
gazou/21.jpg' )">
  最初の void(0) 迄はダーミーで 別の所にジャンプをしない様にしています。
  次の onmouseove はマウスのカーソルが サムネイルの画像の上に来たら gazou/21.jpg を
           選択させるものです。


5.リンクのアンカー </A> を最後に書き加えます。

6.ここ迄のプログラムは 「サムネイルの画像」の上に「マウスのカーソルが来たら」 イベントを発生させる
 (切り替えの為のファイルを選択します) だけのものです。

7.次に選択された画像を既に表示されている画像と切り替えるプログラムを作ります。
 このプログラムは全てのサムネイルの場所で使用しますので「関数」にして、共通で使える様にします。
 関数の名前は sum1 にしました。

 <script type="text/javascript">
 <!--
  function sum1(chengfile1){document.images["standard1"].src = chengfile1;}
  // --></SCRIPT>

 最初の function は sum1 と言う関数を作り イベントが発生した時に(関数に引数が入る)次の
 { 以降の動作をさせるものです。
 次の document.images は standard1 と言う名前の付いた画像を 選択された画像に切り替えるものです
 このプログラムは </HEAD> の上に書いて下さい。

8.ご自分で簡単に作成する場合はこのサイトの必要な部分をコピーして、赤字のファイル名の所を自分の
 ファイル名(フォルダーのディレクトリも含めて)書き換えればそのまま使用出来ます。




5.私のリンク集
  時間が御座いましたら下記の作品を、一度覗いて下さる様お願い致します。
  「作品名」をクリックしますと、その作品にジャンプします。
  戻ります時はその作品を閉じて(右上の×をクリックして)下さい。


作品名 コメント
危険 ! そのビデオの
取り込み
ビデオカメラからパソコンに映像を取り込む
方法に注意しませんと「欠落」が生じます
スマホ(携帯)
でビデオ
スマホからパソコンにビデオを取り込み編集したり
ビデオカメラの映像をスマホに持っていく方法です
パソコン・録音 マイクを使用してパソコンで直接録音する方法を
解説しています
パソコンにマイクを
接続
パソコンに接続出来るマイクと、劣化や破損の
危険があるマイクの種類を解説しています
ホームページで
音声の再生
ホームページの中で音声を再生する方法や
作り方を何種類か解説しています
ホームページで
動画の再生
ホームページの中で動画を再生する方法や
作り方を四種類解説しています
衣類乾燥機修理
丸ベルト交換
全衣類乾燥機の丸ベルトの交換方法と
その入手先を紹介しています