ゼミノート

NOTES

【JavaScript】エリアガイドをつくろう1

クリックでスライドショーが動けば、次は目次をつくっていきましょう。

目次といってもいろんなパターンがありますが、今回はマップを使った見た目でわかりやすいページを作成します。

このように、兵庫県エリアにマウスカーソルを合わせると、マップに色がつく仕組みです。

まずは近畿の都道府県すべての画像を用意しましょう。下記よりダウンロード可能です。

近畿マップ
兵庫マップ
京都マップ
奈良マップ
大阪マップ
滋賀マップ
和歌山マップ
三重マップ

ファイルはすべてimgフォルダの中のkinkiフォルダに格納しましょう。

mapタグとareaタグ

続いてhtmlファイルを作りましょう。

ブラウザをリロードすると、近畿のマップが表示されます。

そして今回はusemapを使い#topとして設定しています。

bodyタグの中に、以下を追加します。

もう一度リロードして、カーソルを兵庫県エリアに合わせると、リンク表示になっていることがわかります。

このようにmapタグとareaタグによって、地図上の範囲指定をしているのですが、この仕組みについて詳しく見ていきましょう。

mapタグを使えば、画像内に複数のリンクを入れます。

範囲指定するエリアに「name=top」を設定して、まずは兵庫エリアを作っていきましょう。

areaタグを使うのですが、この中にshapeというものがあります。

ここでリンクの形状を設定することができます。

「rect」は四角形、「circle」は円形、「poly」は多角形。

今回は四角形を使って、兵庫エリアを指定します。

「coords」で左上の角と右下の角を座標指定しましょう。

兵庫県の形に完全に囲うのは難しいので、四角形を使ってざっくりと囲っているんですね。

円形や多角形の範囲は、次のように座標を指定します。

次回は、クリックしたときのアクションをJavaScriptを使って書いていきましょう。

次の記事:【JavaScript】エリアガイドをつくろう2

SCHOOL教室案内