次の要件を満たすようなJavaScriptを使ったページを用意して,自分の トップページからリンクせよ.
応用問題は,できる人だけでよい.時間がある限りがんばること.
ヒント: 練習問題 フォームは<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の値を変更する.