地図の市区町村などでクリックできるようにする方法【クリッカブルマップ】

WEB制作や広告業等を生業にフリーランスで仕事をしているのですが、とあるポータルサイトの仕事で地図画像から地域の部分をクリックして各ページへリンクできるようにと依頼されました。

まだまだ手さぐりの状態で仕事している事もあり、やり方わかんねぇ・・・状態に。
調べながら作ったので、忘備録的に記事を書いてみた次第です。

クリッカブルマップという名称らしい

要は上の画像で「大阪」や「京都」「兵庫」なんかを個別にクリックしてリンクできるようにする方法。

説明が分かりやすかったサイト：http://park16.wakwak.com/~html-css/map/map1.html

いちから作るのがすこぶるめんどくさそうだったのでググりまくった結果、FireworksやPhotoshopでもクリッカブルマップを作成する支援ツールもあるみたい。

フォトショ拡張パネル配布サイト：http://tsudoi.org/weblog/?p=1279

それをインストールするのさえめんどくさかった私は更にググる！ｗ
そして辿り着いたサイトが便利だったのでご紹介！

イメージマップ（クリッカブルマップ）を簡単作成。

全てWEB上で簡潔し、ロールオーバー画像等全て設定可能。
座標の指定も簡単に指定できます。

https://vmdeooo.sakura.ne.jp/tutuji/imagemap.php

ややこしい座標指定もカチカチっとクリックしていくだけでHTMLが作成されます。
おかげさまで10分もかからずクリッカブルマップ（イメージマップ）が作成できました！（つつじ様ありがとう！）

無事HTMLが生成されたので、ぱぱっとコピーしてHTMLファイルの作成！

あとはホームページへの埋め込みのみ！

WordPressの固定ページへ埋め込もうと、ソースそのままぶちこんだら謎にサイドメニューがふっとんだ！（3カラムのサイトです）

理由を調べようにも詳細にソース読めないので、更にさらにググる！
・・・・うん、わからん！！！
取り敢えず<table>タグで囲んでみた！・・・いけた！

困ったら取り敢えずテーブルタグで囲ってみよう

<table>ここに生成されたHTMLをぶち込む</table>
無事にサイドウィジェット達も復活したのでお試しあれ！