Zenn
🦈

画像クリック領域を自在に変える<area>タグ

2022/09/04に公開
CSS
HTML
React
tech

この記事では、area (とmapタグ）の使い方について解説します。

背景

👎 既存のタグでは、カーソルの反応領域（クリック、ホバー）は四角形
👍 area, mapタグを利用すると反応領域を円形や多角形に出来る

画像にaタグによるリンクや、ホバー領域を設定した時は、既存の要素だと反応範囲は矩形（四角形）になってしまいます。そこで、このarea, mapタグを利用することで反応する領域を円、多角形にすることが出来ます。

実装イメージ

サメの領域にカーソルをホバーすると、バルーンが表示されます。

実装方法の概要

クリック・ホバー領域を多角形として設定する場合のサンプルは、以下になります。
反応領域を変えたい画像<img>と反応領域を変えるための<map>, <area>があります。

<img src="menubox.png" usemap="#mainmenu-map">
<map name="mainmenu-map">
  <area shape="poly" coords="0,180,130,220,260,200,360,300,340,180,440,160,500,200,480,140,510,140,540,140,570,180,600,120,630,160,680,30,300,50" href="/index.html" alt="Return to home page">
</map>

実際のHTMLの記述手順としては以下のようになります。

  1. 紐付けたい画像を用意する
<img src="menubox.png" />
  1. <img>にusemap='#mainmenu-map'を設定し、<map>のname="mainmenu-map"と紐付ける
<img src="menubox.png" usemap="#mainmenu-map">
<map name="mainmenu-map">
</map>
  1. 反応する領域を<area>で定義する
<img src="menubox.png" usemap="#mainmenu-map">
<map name="mainmenu-map">
  <!-- ここ -->
  <area shape="poly" coords="0,180,130,220,260,200,360,300,340,180,440,160,500,200,480,140,510,140,540,140,570,180,600,120,630,160,680,30,300,50" href="/index.html" alt="Return to home page">
</map>

HTMLの記述方法としては、以上でOKです。
しかしながら、<area>の属性がやや複雑です。実際にクリック・ホバー範囲の設定はどのようにやるのでしょうか？
抑えるべきポイントは以下の２つです。

  • areaタグのshape属性
  • areaタグのcoords属性

shape属性には、主に以下を指定できます。

  • rect: 矩形
  • circle: 円形
  • poly: 多角形（三角, 台形, 六角形, etc...）

coords属性に関しては、以下のように指定できます。

  • rectの場合: coords="始点x座標, 始点y座標, 終点x座標, 終点y座標"
  • circleの場合: coords="円の中心x座標, 円の中心y座標, 半径"
  • polyの場合: coords="x0, y0, x1, y1, x2, y2, ..., xn, yn"

つまり、くり抜きたい方法をshape=""で指定し、coords=""で領域を指定します。
例えば、width: 100px, height: 100pxの画像の中心に半径60pxの円でクリック領域を指定したい場合は、<area shape="circle" coords="50,50,60">とすれば良いことになります。

多角形を実装する方法

では、実際にshape="poly"で多角形を指定し、coords="x0, y0, x1, y1, x2, y2, ..., xn, yn"を指定し実装していきます。

ここで、疑問に思うのですが、複雑な多角形を作ろうとするとcoords="x0, y0, x1, y1, x2, y2, ..., xn, yn"を記述することがかなり面倒です。そのため、便利ツールを利用します。

HTML Imagemap Generatorを利用する

HTML Imagemap Generatorは、以下のリンクからアクセスしてください。

HTML Imagemap Generator
http://labs.d-s-b.jp/ImagemapGenerator/

利用方法としては、以下になります。

  1. 上記リンクにアクセス
  2. マッピングしたい画像をアップロード
  3. 設定したいshapeを設定（今回はpoly）
  4. 画像をクリックし、多角形を作成。最後にescキーで完了。
  5. 右にcoordsが吐き出されるので、コピペして完了。
動画で利用方法を確認したい方はこちら

ここで出てきた（コピーした）ものが以下のコードです。

<img src="shirowani.webp" usemap="#ImageMap" alt="" />
<map name="ImageMap">
  <area shape="poly" coords="4,210,134,219,257,204,367,245,351,189,461,171,521,200,536,146,564,146,626,183,636,129,695,167,695,126,755,68,751,27,636,86,612,82,595,28,543,67,456,61,439,2,365,52,225,90,67,162,67,162" href="#" alt="" />
</map>

一旦、これで完成でこのコードをコピペすればOKです。
後は、css等でインタラクションにしたり、areaタグ内にhref属性を持たせることでaタグのようにページ遷移をすることが出来ます。

ホバーして反応するような実装

上記のコードを基に、ホバーしたときの反応させたい場合は、以下のように実装します。
※いろいろな方法があると思うので、試してみてください。

<div class="shirowani">
  <img src="shirowani.webp" usemap="#ImageMap" width="756" height="248" alt="シロワニの画像" />
  <map name="ImageMap" class="shirowaniMap">
    <area shape="poly" coords="4,210,134,219,257,204,367,245,351,189,461,171,521,200,536,146,564,146,626,183,636,129,695,167,695,126,755,68,751,27,636,86,612,82,595,28,543,67,456,61,439,2,365,52,225,90,67,162,67,162" alt="シロワニの多角形" />
  </map>
  <p>ホバーされました</p>
</div>

.shirowani p {
  display: none;
}

/* map（多角形）がホバーされたら隣接するp要素を表示 */
.shirowani map:hover + p {
  display: block;
}
codepenでコードと結果を確認する

aタグのような実装

基本的な使い方は、aタグのようにリンクで飛ばすような使い方が多いようです。
そのため、画像にリンクを付与したい場合は、areaタグにhref属性を指定します。

<img src="shirowani.webp" usemap="#ImageMap" width="756" height="248" alt="シロワニの画像" />
<map name="ImageMap" class="shirowaniMap">
  <area href="https://codepen.io/" shape="poly" coords="4,210,134,219,257,204,367,245,351,189,461,171,521,200,536,146,564,146,626,183,636,129,695,167,695,126,755,68,751,27,636,86,612,82,595,28,543,67,456,61,439,2,365,52,225,90,67,162,67,162" alt="シロワニの多角形" />
</map>
codepenでコードと結果を確認する

実装としては、以上です。

ブラウザ対応状況

主要なブラウザで利用可能です。
caniuseでは、areaタグが灰色の部分は多いように見えますが、unknownでデータがないだけで、かつIE11には対応しているので基本的にレガシーでもモダンブラウザでも使えると思って良さそうです。

https://caniuse.com/?search=area

https://caniuse.com/?search=map

さいごに

多角形でクリック・ホバー範囲を設定する方法を紹介しました。
もっと仕様について詳しく知りたい方は、MDNをご確認ください。
また、実務で何回も使用しているわけではないので、利用方法や仕様の面でご指摘あれば、コメントにお願いします。

おまけ

制限

MDNで調べた感じですが、usemapはHTMLImageElement(<img>)とHTMLObjectElement(<object>)だけのようです。※<input>でも使えるようだが非推奨。

また、<img>の場合、aタグやbuttonタグの中に入れては行けないみたいなので注意です。

Note: <img> 要素が <a> または <button> 要素の子孫である場合は、この属性を使用することはできません。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/img

Reactでの実装

Reactでの実装は以下のように行いました

<div className={styles.image} >
  <Image
    src={item.src}
    alt={item.name}
    width={item.width}
    height={item.height}
    useMap={`#${item.useMapObj.name}`}
  />
  <map className={styles.image} name={item.useMapObj.name}>
    <area
      shape={item.useMapObj.shape}
      coords={item.useMapObj.coords}
      alt={item.name}
    />
  </map>
  <Balloon name={item.name} description={item.description} cite={item.cite} />
</div>

補足

  • Image: next/image
  • Balloon: 独自実装のバルーン

参考

MDN: https://developer.mozilla.org/ja/docs/Web/HTML/Element/area
AIZULAB BLOG: https://www.aizulab.com/blog/imagemap-tools/

Discussion

ログインするとコメントできます