イメージマップの生成とレスポンシブ対応【image-map-resizer】

やることは

詳しく見ていきましょう

HTML Imagemap Generator で area を設定

便利なウェブサービスがありました。

こちらのサービスを使っていきます。

ページを開いたらこんな画面に遷移します。

画像のとおり画像をドラッグ＆ドロップ。

右上に短形であったり円であったり選択できる箇所があるんでそれを選択。

その後選択したい箇所を囲います。非常に直感的でわかりやすい..

<img src="ソース" alt="" usemap="#ImageMap" />
<map name="ImageMap">
  <area shape="rect" coords="数字" href="リンク先">
</map>

img タグの usemap 属性が map タグの name 属性を探しに行きます。

細かいことは気にしなくても、ジェネレーターを使えば勝手にやってくれるので助かります。

詳しく知りたい方はMDN Web Docsで解説されてますので一読ください。

CDN版を使用します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/image-map-resizer/1.0.10/js/imageMapResizer.min.js"></script>

head タグ内に貼り付け。

JS は head 内に書くか、外部ファイルを読み込むように設定します。

外部ファイルに下記のように記載。

imageMapResize();

これだけでした。

head タグ内に書く場合は script タグで囲ってあげましょう。

See the Pen by toshi (@toshitaka-n) on CodePen.

Codepen 初めてちゃんと使ってみた。

便利やなぁ..

今回はイメージマップの生成とレスポンシブ対応について解説してみました。

今度は hover 時の配色設定もやっていきたいと思います。

最後までご覧下さりありがとうございました。