8.3へ

8.4 ちょっとした工夫で見栄えを良くする

 8.4.1 ドロップダウンメニュー
 8.4.2 クリッカブルマップ
 8.4.3 別画面にメニューを表示する
 

8.4.1 ドロップダウンメニュー

 フレームを使うと、メニュー画面と本文画面に分割して常時メニューを表示することができますが、本文の画面が狭くなります。そんな時ドロップダウンメニューはいかがでしょうか。一行分のスペースで可能です。

 <FORM>タグの<SELECT>を使ってドロップダウンリストを作り、選択した時にJavaScriptで各ページに飛ぶようにします。サンプルを見て下さい。その中で作り方を説明しています。

ページのトップへ

8.4.2 クリッカブルマップ

 画像上の特定の場所をクリックすると別のページにリンクするのが、クリッカブルマップです。下の画像上にマウスを移動し、指のマークになるところでクリックして下さい。

ページのトップへ

8.4.3 別画面にメニューを表示する

 別の小さな画面にメニューを表示して、そのメニューで大きな画面の内容を切り替えて見せるのも面白いですね。そんな方法を考えてみました。

 別の画面にリンク先を表示するには、TARGET属性を使ってその値に表示すべき画面の名前を指定すればできます。すなわち、メニュー画面から新しい画面を作り出して名前(window1)を付けメニュー画面のリンクにTARGET=window1を付ければできます。しかしこれではメニュー画面が普通の大きさになって面白くないですね。

 それでは考え方を述べます。「最初にアクセスされるファイル(index.html)が開かれた時、画面に名前(window1)を付け、同時に小さい画面も開いてメニューを表示する。」ということです。

 サンプルの中で具体的に説明します。

 
左の目次の各欄をクリックすれば別のページが表示されます。
フレーム表示されていない場合はここをクリックして下さい。