【areaタグ】イメージマップに複数のクリック可能なリンク領域を設定してみよう！

★<area>タグの特徴

<area>の説明

<area>とは

イメージマップ内に複数のクリック可能な領域を指定するためのタグです。

<map>要素の中だけで使用するもので、画像内の領域を複数のリンクと関連付けすることで、クリッカブルマップ（クリック可能な）としての機能を持たすことができるようになります。

■使用目的

主に<map>要素内で使用し、<img>要素などで用意した画像内に直接リンクを埋め込みたいときに使います。画像内の様々なオブジェクトに対して、個別にそれぞれ複数のリンクを埋め込んで使えます。

リンクを埋め込むことで、その画像のオブジェクトを直接クリックすることができるようになり、クリックした場所によって違うリンク先の情報を提示するという使い方があります。

■使われる属性

使用上の注意点

① href属性を持たない場合

この場合は、<area>要素に、alt属性、rel属性、target属性、download属性、refarrerpolicy属性、ping属性を指定してはいけません。

② href属性を持っている場合

この場合は、画像内のオブジェクトにリンク機能が設定されているので、alt属性の指定もしておいた方がよい。反対にhref属性が無い場合は、alt属性を省略すること。

③ <area>要素にitemprop属性が指定されている場合は、href属性も指定することが必要。

④ 指定できる領域の形状は4つ。

四角形の「rect」、丸の「circle」、多角形の「poly」、全体画像を領域とする「default」です。

全体画像がクリック対象になる「default」が指定された<area>要素は、他の四角や丸や多角形を指定した<area>要素よりも後に記述すること。これは「default」が一番上に重なるとクリック対象が全体化してしまい、他の形状を消えてしまうため。

⑤ rect、circle、polyを指定するのであれば、coords属性が必須。

内容モデル

<area>要素の内容モデルは空要素なのでありません。

空要素のため、開始タグは必要だが、終了タグを記述してはならない。

アクセシビリティでの注意点

リンク付きイメージマップはユーザーの視覚情報に大きく頼っているため、ブラウザのスクリーンが見えない、また利用できないなどの状況での使用は難しいことに注意が必要です。

上記のように画像が表示されなければ、リンク内容を把握するのは難しいですよね、もしも画像表示がされない場合などの対処法として、<area>要素にalt属性を指定することで、適切なリンクテキストを記述しておくことができます。これにより、画像が無い場合でもリンク内容が伝わりやすく利用されやすい状態にできます。

こういった問題もあることから、ナビゲーション部分などの重要な部分にリンクを使用する場合には、イメージマップだけでなくa要素も使って記述することを検討してください。

<area>の記述例

■基本的な記述例

★HTML

<area>要素が個々のリンクになります。href属性や、必要であればa要素を用いて共通の属性を使用することが可能です。

<area>要素に指定しているshape属性は、イメージマップに用いる図形の種類を列挙型属性として表す属性です。種類には、circle、poly、rect、defaultの４つから選択することができます。

coords属性は、イメージマップに用いる図形の座標を表します。CSSピクセルで表すことができ、指定する座標はshapes属性値によって変わります。

まとめ

この記事では、<area>要素についての解説をいたしました。

この要素は、<map>要素の子要素して用いられ、画像内のオブジェクトに対して、リンクを埋め込むためのタグです。

複数のリンク対象を４つの形状から選んで、クリッカブルマップにしたい箇所の座標を指定して使うことができます。

使い方次第ではとても便利な要素ですので、是非覚えておきたいですね。

この記事が皆さんのお役に立てれば幸いです。

最後まで読んでいただき、ありがとうございました。またなん👍