自動で変化するページは見ているだけなら楽しいが、役立つページとしては
スローで動かして観察したい！、駒送りで見たい！、抜き取りで見たい！、等々
のお客さんの要望には対応出来ない。
そこで、お客様が手動で変化させられるようにした方が喜ばれると思う。
その方法は写真のサムネルを表示し、そこにマウスを載せたものを拡大写真が入れ替わるようにします。
１、縮小画像
縮小画像はイメージソフトで実際に縮小して別のイメージファイルを作って準備してもいいのですが
＜ＩＭＧ＞タグ内で、
ｗｉｄｔｈやｈｅｉｇｈｔを使ってブラウザ上の表示サイズを指定して作ってもいい。
次の見本は同じファイルからｗｉｄｔｈだけ変更して表示した物です。
<IMG src="01.jpg" width=240>
|
width=120
|
60
|
30
|
|---|
２、選択情報の伝達
拡大表示は、前項の様に、順番ではなく、お客さんが選ぶのですから、個々の縮小イメージの上にマウスが乗ったら
写真番号をもって命令を呼び出すようにする必要があります。
<a href="JavaScript:void(0)" onMouseover="命令(写真番号)">
<IMG src="01.jpg" width="30">
</a>
のように書かば実現できます。
なお「ｖｏｉｄ（０）」は「なのもしない」という命令です。
＜Ａ＞タグを使う場合、クリックされても影響の無いように、この命令をセットしておきます。
サムネルを全て書くのは大変ですのでＪａｖａＳｃｒｉｐｔのｆｏｒループを使いｗｒｉｔｅ命令で書かせると楽です。
具体的には
<![CDATA[
document.write('<table border=1><tr>');
for(i=0;i<6;i++){
document.write('<td><a href="JavaScript:void(0)" onMouseover="chg(',i,')">');
document.write('<img src="',file[i],'" width=35 border=0></a></td>');
}
document.write('</tr></table>');
]]>
のように書けが、写真番号付きの呼び出し命令をセットしたサムネル表示ができます。
３、完成見本
スライドショー
マウスを乗せてください。
動画
マウスで撫でてください。
ソース
<![CDATA[
<html>
<head>
<title>動画</title>
<script language="javascript">
<!--
cho_url="./";//別の場所にある写真を使うときはフルパスで書く
cho_file=new Array("hyo11.jpg","hyo12.jpg","hyo13.jpg","hyo14.jpg","hyo15.jpg","hyo13.jpg");
//イメージ入れ替え
function chg1(rr){
document.cho.src=cho_url+cho_file[rr];
}
//-->
</script>
</head>
<table border=1 bgcolor=#eeeeee><tr><td>
<img src="hyo11.jpg" name="cho" width=320 height=240 border=0>
</td></tr></table>
<script language="javascript">
<!--
//サムネル
document.write('<table border=1><tr>');
for(i=0;i<6;i++){
document.write('<td><a href="JavaScript:void(0)" onMouseover="chg1('+i+')">');
document.write('<img src="'+cho_url+cho_file[i]+'" width=48 border=0></a></td>');
}
document.write('</tr></table>');
//-->
</script>
マウスで撫でてください。
</center>
</body>
</html>
]]>
スライドショーとの違いはファイル名のみです。
|
