今商業サイトでは「標準の大きさ」の画像一枚に「小さなサムネイル」を数枚付け、サムネイルの上に
マウス(のカーソル)が乗りますとサムネイルの小さな画像が標準の大きな画像に切り替わる手法が
流行ってきております。
私たち個人でもそれが出来ないものかと思い、色々調べましたら割と簡単に出来る事がわかりましたので
何種類かの作り方を発表させて頂きます。
サンプルの写真には何の意味もありません。このサイトを作る為に急遽撮影したものです。
謝辞 このサイトを作るに当たりまして出版物の資料には誤りがあり、諸先輩のサイトの資料等を
参考にさせて頂きました。有難う御座いました。
1.サムネイルの画像を標準(拡大)画像に切り替える方法
左下のサムネイルの上にマウス(のカーソル)を持って
行って下さい。画像が変わります。
①は標準の方法です。
②はサムネイルの画像と切り替わる画像を違えてみました
この方法は技術的には可能というだけで、見る人が
まごつきますので、使わない方が良いと思います。
③はサムネイルを画像で無く、文字にしてみました。
④はマウスが乗った時と離れた時に別々の動作を
させてみました。
 |
 |
バラ |
 |
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.私のリンク集
時間が御座いましたら下記の作品を、一度覗いて下さる様お願い致します。
「作品名」をクリックしますと、その作品にジャンプします。
戻ります時はその作品を閉じて(右上の×をクリックして)下さい。
| 作品名 | コメント |
|
音楽の再生 |
ホームページの中に「ジュークボックス」 を作りました |
|
ビデオの再生 |
ホームページの中でビデオ(3方式)を再生します |
|
パソコにマイクを 接続 |
パソコンに接続できるマイクの種類や注意点です |
|
画像の移動 |
青空の中に気球が揺ったりと漂っています |
|
画像の拡大 |
マウスの操作で画像の拡大(原寸表示)等を行います |
|
FFFTP |
FFFTPの初期設定等の説明です |