知名度が低いウェブ標準ひとり Advent Calendar 2021 – 23 日目
今日は <map> です。任意の形状のクリック領域を作成できます。
基本的な使い方
図形を定義する <map> 及び <area> と、それを利用する画像 <img> の組み合わせになります。
<map name="my-map">
<area
shape="rect"
coords="10,10, 410,310"
href="https://example.com"
alt="Example"
/>
</map>
<img usemap="#my-map" src="image.png" />
<area> は複数書けます。
shape は領域の形状で、値には矩形 rect や円形 circle、多角形 poly 、全体 default が利用できます。
coords は coordinate つまり座標です。複数の数値をカンマ , 区切りで与えます。内容は shape によって x1,y1,x2,y2 だったり x,y,r だったりします。単位はピクセル。
フォーカスリングで領域を可視化
クリックじゃなくてキーボードのタブキーとか使ってみてください。画像上にフォーカスリング（でいいのかな）が表示され領域が可視化されます。
手元の Windows 環境下で、Chrome では outline-color で色を設定できました。Firefox は昔ながらの点線のまま。利用可能な CSS プロパティとかの仕様は特に決まってないかな？ 調べてません。
おしまい
今は position で要素を自由に配置できるし矩形でない領域をクリックさせる場面は多くないので、使う場面はあまりなさそう。使えないこともないけれど。
昔、そうまだテーブルレイアウトが主流だった頃、大きな画像 1 枚とこの <map> を組み合わせたナビゲーションがよく使われていました。あと日本地図で都道府県ごとにクリックできるみたいなのもありましたね。今なら SVG でやるんだろうか。