イメージマップを使ってレスポンシブな画像内の好きな箇所にだけ、属性やクラスを与えたりする - Qiita

画像内に好きな形でイメージマップを作って、一部箇所だけに属性やクラスを与えたり、クリック出来るようにしていきます。また、イメージマップをレスポンシブな画像に対応させていきます。 例えば、下記のようなイメージの各パーツの機能説明をしようと思って、それぞれのボタンにクリックイベントやホバーを付けたい時にどうするか。 恥ずかしながらイメージマップなるものを知らかなかった私は最初、divタグやCSSのposition: absoluteを使ってイメージの上に要素を作っていこうと試みましたが、途方もない作業で詰みました。 調べたところイメージマップなるものがあると知り、利用してみたところ簡単だったので、備忘録もかねてQiitaに初投稿してみます。 ##イメージマップとは？ １つの画像の中に複数の領域を作って、一般的にはその領域にリンク先を指定し、クリックすればリンク先に飛べるようにするものです。リン