ボタンをクリックすると画像が切り替わります。これはNN3.0から追加されたImageオブジェクトの機能ですが、ショックウェーブなどのように特別な開発ツールを使いません。HTMLを作るのと同じエディターなどの簡単なツールだけでインタラクティブな画像を使ったページを作れる手軽さが魅力です。しかも、見るときに必要なのもNN3.x(JavaScript1.1)以上対応のブラウザだけでプラグインなどをダウンロードする手間もありません。また、画面への画像表示とは別にキャッシュへの事前読み込みを行えるので画像を扱いながら極めてレスポンスの良い表現が可能です。NN3.0,IE4.0から使えます。
応用 :
画像を取り替えたり増やしたりして使ってみてください。
参照 : オブジェクトの有無を調べる if(document.images){命令}, new, Array(), Image(), function, 変数, src, document.images[], onClick,
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
//イメージの事前読み込み
if(document.images){
movimg=new Array()
movimg[0] = new Image() ; movimg[0].src = 'HATUHI.GIF';
movimg[1] = new Image() ; movimg[1].src = 'HAKEN.GIF';
movimg[2] = new Image() ; movimg[2].src = 'BOTAN.GIF';
movimg[3] = new Image() ; movimg[3].src = 'ISHI.GIF';
}
/*
画像を増やす時は HTML内の
<input type="button" value=' xxxx '
onClick="changImg1('view',x)" >
を増やすとともに
上記へ
movimg[4] = new Image();movimg[4].src='xx.GIF';
movimg[5] = new Image();movimg[5].src='xx.GIF';
.......
という風に追加してください。
*/
//アニメーション
function changImg1(imgName,imgNo){
if(document.images){
document.images[imgName].src = movimg[imgNo].src ;
}
}
//-->
</script>
</head>
<body>
<img name="view" src="KAWARA.GIF"><br>
<form>
<input type="button" value=' 大仏と初日 '
onClick="changImg1('view',0)">
<input type="button" value=' 発遣門 '
onClick="changImg1('view',1)">
<input type="button" value=' 牡丹の小径 '
onClick="changImg1('view',2)">
<input type="button" value=' 十方堂の庭石 '
onClick="changImg1('view',3)">
</form>
</body>
</html>
**下の説明は読まなくても動きます(^^)/
無理して読まずに、ともかくコピーして使ってみましょう(^0^)/if(document.images){命令1}else{命令2}はブラウザチェックです。ここではNN3.0以降のImage()などの命令を使っているのですが、これらをむき出しで使うとNN2.0やIE3.0などでエラーが出ます。そこで、エラー回避のためにdocument.imagesというオブジェクトが使えるかどうかを確認して使えるならImage関連の処理を{命令1}へそれ以外の場合の処理を{命令2}に記述します。ちなみに、ここでは、else{命令2}を省略してもかまいません。document.imagesが実装されたのはNN3.0以降なのでnavigator.appVersion.charAt(0)>=3と書いてバージョン3以上のブラウザに限定する方法もあります
変数=new Array()でたとえばmovimg[番号]という配列を作ります。配列とはこのように[番号]を付けてまとめて使うことのできる変数です。ここではmovimg[0].srcに最初の画像を、movimg[1].srcに次の画像を、movimg[2].srcに次の画像を....という風に画像ファイルを納めておいて、あとで、この番号の0の画像を出力するという具合に使います
movimg[i] = new Image()でmovimg[i]という配列で画像が扱えるようになります。次にmovimg[0].src='HATUHI.GIF'とすることによって用意したmovimg[1].srcに'HATUHI.GIF'という名前の画像を納めます
function changImg1(imgName,imgNo){命令}で{}内に書かれた命令を実行する関数changImg1()が作られます。こうしておいて、スクリプト内にchangImg1()と記述すると、命令が実行されます
imgName,imgNoはchangImg1()を記述する際に、たとえば、onClick="changImg1('view',1)"と書くことで、ボタンをクリックして関数を実行する時にimgNameへ'view',imgNoへ1を代入します。ここでは、たとえば、関数内に書かれたmovimg[imgNo].srcのimgNoへ1が渡されるのでmovimg[1].srcを意味するようになります。もし"changImg1('view',2)"ならmovimg[imgNo].srcはmovimg[2].srcを意味します
たとえば、document.images['view'].src=movimg[2].srcはページのなかの'view'という名前の画像をmovimg[2].src('BOTAN.GIF'牡丹の花)で書き換えます
onClick="命令文"でクリックしたら"命令文"を実行するという意味です
使用している画像:
HATUHI.GIF
HAKEN.GIF
BOTAN.GIF
ISHI.GIF
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)