Image maps
<map> と <area> 要素を使い、画像の特定の領域にリンクやアクションを割り当てるイメージマップを作成します。
概要
<map> と <area> 要素を使い、画像の特定の領域にリンクやアクションを割り当てるイメージマップを作成します。
対応ブラウザ
デスクトップ
Chrome 1+
Edge 12+
Safari 1+
Firefox 1+
モバイル
Chrome Android 18+
Safari iOS 1+
Firefox Android 4+
基本構文
HTML
<img src="map.png" usemap="#mymap" alt="フロアマップ">
<map name="mymap">
<area shape="rect" coords="0,0,100,100" href="/room1" alt="会議室1">
<area shape="circle" coords="200,150,50" href="/room2" alt="会議室2">
</map>実務での使いどころ
-
Image maps の活用
イメージマップ。画像の領域ごとにクリック可能なリンクを設定する機能。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。