【HTML】1枚の画像に複数のリンクを設定したい！イメージマップの使い方！～HTML Imagemap Generator～

たまにありますよね。こういうの…地図だったり複雑に配置された商品画像だったり、どうしても一枚の画像で反映させないといけなかったり…困りましたね～。空のaタグ作ってポジションで重ねるか。でも、そうすると重なる部分とか細かくできないな～。そんな時は「イメージマップ」を使おう！

さらに！！簡単にエリアを生成してくれるツール「HTML Imagemap Generator」のご紹介です！

■イメージマップの作り方！

まずは完成形のコードはこちらになります。

<img src="nihonchizu_name.png" usemap="#ImageMap" width="400" height="400" alt="日本地図" />
　<map name="ImageMap">
　　<area shape="poly" coords="273,64,278,54,286,8,298,17,304,28,332,41,340,47,366,35,362,54,369,74,338,83,330,106,292,86,285,87,275,89,272,85,267,84,267,94,272,97,284,99,280,108,271,106,266,114,256,113,253,110,256,101,246,82,258,77,256,70,258,58,272,66,283,13" href="#" alt="北海道" />
　　<area shape="circle" coords="301,154,17" href="#" alt="岩手県" />
　　<area shape="rect" coords="259,203,295,229" href="#" alt="福島県" />
　</map>

●imgタグの指定

いつも通り、imgタグで画像のパスを記述します。その中にイメージマップに必要な「usemap=”#ImageMap”」という属性を追記。「ImageMap」の部分は任意ですが「#」を忘れずに！画像のサイズもwidthとheightで入れておきましょう！

●mapタグの指定

先程、usemapで指定した内容を「name」属性に指定します。

<map name="ImageMap">

●areaタグの指定

「areaタグ」にリンクエリアにしたい座標を記述していきます！が…座標の数値なんでどうやって求めるのかってことで登場するのが「HTML Imagemap Generator」です。使い方はすごい簡単！

http://labs.d-s-b.jp/ImagemapGenerator/

■HTML Imagemap Generatorの使い方

使いたい画像をドラック＆ドロップで表示させて、あとは右上の選択肢から使いたい図形を選んでリンクエリアを囲うだけ！

• 短形を描く：リンクエリアが四角の状態です
• 円形を描く：リンクエリアが円の状態です
• 多角形を描く：リンクエリアが多角形の状態です。

多角形を選択すればどんな形でも細かくリンクエリアを指定できますね！

さてさて、ここまで作業すればお分かりかもしれませんが、先程まで記述していた内容が右側のスペースに表示されています。こちらをhtmlに移してあげれば大丈夫です！

「areaタグ」内の座標も「coords」にばっちり書いてあります！「shape」は選択した図形の種類ですね！という事で、areaタグはこのようになります！

<area shape="rect" coords="259,203,295,229" href="#" alt="福島県" />

• rect：短形（四角形）
• circle：円形
• poly：多角形

これで自由自在にリンクエリアを指定できます！

おや…リンクエリアがズレてる…。

きっとcssでimgのwidthを100%に指定してるからですかね～。って、レスポンシブに全く対応してない！

次回はイメージマップをレスポンシブに対応にします！

それではまた。