ブラウザ上でイメージマップのコードを作成できるWebサービス「HTML Imagemap Generator」

HTML Imagemap Generatorは、画像内の特定箇所にリンクを付けるイメージマップのコードを作成できるWebサービスです。クリッカブルマップと呼ぶこともありますね。

画像をアップロードしてリンクを付けたい箇所を選択するだけで、map要素のコードを生成してくれます。

HTML Imagemap Generatorの使い方

HTML Imagemap Generatorにアクセスして、ドラッグ&ドロップで画像をアップロードします。

右上にある「短形を描く」「円を描く」「多角形を描く」の中から、イメージマップの形状を選択します。

画像の上をドラッグして、リンクを付けたい箇所の範囲を選択します。多角形ツールの場合は、クリックしながら選択していきます。

右側のHTMLの欄にイメージマップのコードが生成されます。これをコピーして利用します。

今回の場合、以下のようなHTMLが生成されました。

<img src="tomcat1574_TP_V4.jpg" usemap="#ImageMap" alt="" />
<map name="ImageMap">
  <area shape="rect" coords="180,127,416,342" href="#" alt="" />
</map>

あとは、area要素のhref属性にリンク先URLを指定してあげればOKです。

<img src="tomcat1574_TP_V4.jpg" usemap="#ImageMap" alt="" />
<map name="ImageMap">
  <area shape="rect" coords="180,127,416,342" href="https://techmemo.biz/" alt="" />
</map>

あとがき

イメージマップを使うことはめっきりなくなりましたが、古いサイトの修正等でイメージマップを作成したり編集する必要が出てきた場合は、ぜひご活用ください。