コンピュータリテラシー2

Webページの作成(続き)

学生サーバに作成しておいた自分のWebページにJavaScript機能による画像のスライドショーページを作成せよ．

1. (練習問題)サンプルを改良して「前へ」「後ろへ」というボタンをフォームで用意して，前後の画像を表示できるようにする．
2. (必修問題)画面の下にはサムネイル画像を表示しておいて，それをクリックするとその画像を上部に表示するようにする
3. (応用問題)画像の拡大ボタンと縮小ボタンを付けて，画像を拡大縮小できるようにしてみよ．スライドショーのように拡大ボタンを何回も押せば，数段階拡大したりした方がおもしろい．
4. (おまけ)マウスカーソルが位置している所のサムネイル画像をその場で少しだけ大きく表示するようにすると面白い

応用問題は，できる人だけでよい．時間がある限りがんばること．

ヒント: 
練習問題　先週学んだフォームの<form> </form>タグの中に<input type=button>を配置．
　　　　　そのボタンを「クリックした時」のイベントとしてJavaScriptを埋め込む．
　　　　　その時呼び出すJavaScriptの内容は，サンプルプログラムの「前へ」「後ろへ」の所と同じもの．
　　　　　※ただしイベントとして組み込むため，リンクとして埋め込むための「javascript:」は不要．
必修問題　サムネイル画像は，<img width=幅 height=高さ>タグでサイズ指定した画像を埋め込めばよい．
　　　　　その画像にイベントを埋め込む．
　　　　　埋め込むイベントは，ボタンとは違って「その」画像と同じ画像を表示させるためのもの．
応用問題　「前へ」「後ろへ」とは別に「拡大」「縮小」ボタンを配置する．
　　　　　サンプルプログラムのsetImage関数は，<img>の"src="オプションの内容を書き換えるものだった．
　　　　　srcではなく"width="と"height="の方を書き換えればサイズを変更することができる．
　　　　　つまりsetImageとほぼ同様な動きをする(ただしsrcでなくwidthとheightを書き換える)scaleImage関数を
　　　　　　　setImageとは別に用意する．
　　　　　「拡大」「縮小」ボタンのイベントにはscaleImageの方を呼び出すように設定する．
おまけ　　イベントには，他にもonMouseOverとonMouseOutなどがある．
　　　　　サムネイル画像の<img>に別のイベントを別の動作を実行するように埋め込める．
　　　　　例えばonMouseOverした時に，わずかに拡大させ，onMouseOutしたときに元に戻すような動作．
　　　　　この動作を別関数として用意する．この関数のパラメータには，サムネイル画像の番号を渡してやる．
　　　　　関数の中で，渡されてきた番号のサムネイル画像のwidthとheightの値を変更する．

採点方法

• 前へ後ろへボタンがあるかどうか．
• そのボタンが機能しているかどうか．
• サムネイル画像があるかどうか
• それが機能しているかどうか
• 拡大ボタン・縮小ボタンがあるかどうか
• それが機能しているかどうか
• スライドショーボタンがあるかどうか
• それが機能しているかどうか
• 時計があるかどうか
• それが機能しているかどうか

締め切り

• 次回授業開始の前まで

遅れて提出する場合、Webページを作成の上、田村まで連絡することただ し、その際の採点は低目の評価とする。