ゼミノート

NOTES

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

前回の記事:エリアガイドをつくろう1

引き続き、エリアガイドの地図リンク部分を作っていきます。

まずはじめに、都道府県マップに赤色をつけたデータを用意しましょう。

下記よりダウンロード可能です。

近畿マップ色なし

兵庫マップ赤色

京都マップ赤色

三重マップ赤色

奈良マップ赤色

大阪マップ赤色

滋賀マップ赤色

和歌山マップ赤色

新たにimgフォルダの中にkinkiフォルダを作成。

すべての画像データを格納します。

配列のJavaScriptをつくる

新しくJavaScriptファイル、kinki.jsを一つ作ります。

そして外部ファイルの読み込みをHTMLのヘッダに追加。

jsフォルダの中に、kinki.jsを作成し、以下のようにコードを書きました。

配列を使って、imgフォルダの画像を切替えるJavaScriptです。

マウスオーバーのコードを追加

ここでもう一度、kinki.htmlに戻りましょう。

マウスオーバーしたとき、兵庫エリアが赤色に変わるようにコードを追加しました。

兵庫県の上でマウスオーバーしたときに配列1番、兵庫マップ赤色の画像を、マウスを離したときは色なしのマップ画像に戻ります。

この動きが完成できれば、同じ仕組みを他の都道府県にも適用させましょう。

ここで一つ、見た目のちょっとした問題が発生。

クリックしたときに短径枠が表示されてしまいますが、これはcssで解決します。

map.cssファイルを外部ファイルとして用意し、読み込み設定。

cssの中身は以下のように書いておきます。

以上でマップを使ったリンクが完成しました。

細かくリンクエリアを指定したい場合、こういった仕組みは大変活用できそうです。