イメージマップ作成ツール

画像の一部にリンクを貼る「イメージマップ（クリッカブルマップ）」のHTMLを作成できます。
画面幅に追従するレスポンシブ対応のJavaScriptまで一緒に出力します。

読み込んだ画像はブラウザの中だけで処理され、サーバーには送信されません。

1. 画像を読み込む

ここに画像をドラッグ＆ドロップ
またはクリックしてファイルを選択

画像のパス（出力するHTMLに使われます）

map の name

#	形	href	alt	別窓
画像を読み込んで範囲を指定すると、ここに一覧が出ます。

画像を読み込むと、ここにHTMLが出力されます。

画像を読み込むと、ここにJavaScriptが出力されます。

</body> の直前に貼るか、外部ファイルにして読み込んでください。

多角形は、クリックで頂点を足していき、最後に「多角形を確定」を押すか、ダブルクリックで閉じます。

指定した範囲をクリックすると選択状態になり、Deleteキーで削除できます。

イメージマップの弱点は、<area> の coords が 絶対値（px）でしか指定できないことです。

画像をCSSで max-width:100% にして縮めると、画像だけが小さくなり、クリック範囲は元のサイズのまま取り残されます。スマホで見たときに「リンクの位置がずれる」のはこれが原因です。

そのため、画像の表示幅に合わせて coords を計算し直す処理が必要になります。このツールが出力するJavaScriptは、その計算をしています。外部ライブラリは使っていません。

alt は必ず入れてください。リンクの内容が読み上げられなくなります。
画像そのものが差し替わると座標はずれます。画像を変えたら作り直してください。
クリック範囲が細かすぎると、スマホでは押しづらくなります。指で押せる大きさを意識してください。
リンクの数が多い場合や、あとから更新する可能性が高い場合は、イメージマップではなく position:absolute で <a> を重ねるほうが管理しやすいこともあります。