HTML イメージ マップを使用すると、イメージ上にクリック可能な領域を作成できます。

イメージマップ

HTML<map>タグは、イメージマップを定義します。イメージ マップは、クリック可能な領域を持つイメージです。領域は1つまたは複数の<area>タグで定義されます。

下の画像のコンピューター、電話、またはコーヒーをクリックしてみてください。

どのように機能しますか?

イメージ マップの背後にある考え方は、クリックしたイメージの場所に応じてさまざまなアクションを実行できるようにすることです。

イメージ マップを作成するには、イメージと、クリック可能な領域を記述する HTMLコードが必要です。

画像

画像は、<img>タグを使用して挿入されます。他の画像との唯一の違いは、usemap属性を追加する必要があることです。

イメージ マップの作成

次に、<map>要素を追加します。

エリア

次に、クリック可能な領域を追加します。

クリック可能な領域は、<area>要素を使用して定義されます。

shape

クリック可能な領域の形状を定義する必要があり、次の値のいずれかを選択できます。

• rect- 長方形の領域を定義します
• circle- 円形領域を定義します
• poly- 多角形領域を定義します
• default- 領域全体を定義します

また、クリック可能な領域を画像上に配置できるように、いくつかの座標を定義する必要があります。

shape="rect"

したがって、座標34,44は、左マージンから34ピクセル、上から44ピクセルの位置にあります。

これは、クリック可能になり、ユーザーをページ"computer.htm"に送る領域です。

形状="円"

円の領域を追加するには、まず円の中心の座標を見つけます。

これは、クリック可能になり、ユーザーを「coffee.htm」ページに送る領域です。

shape="poly"

これを使用して、任意の形状を作成できます。

クロワッサンの形みたい！

下の画像のクロワッサンをクリック可能なリンクにするにはどうすればよいでしょうか?

クロワッサンのすべてのエッジのx座標とy座標を見つける必要があります。

座標は、x軸用とy軸用のペアで提供されます。

これはクリック可能になり、ユーザーをページ「croissant.htm」に送る領域です。
***

イメージマップとJavaScript

クリック可能な領域で、JavaScript関数をトリガーすることもできます。

この章のまとめ

• HTML<map>要素を使用してイメージマップを定義します。
• HTML<area>要素を使用してイメージマップ内のクリック可能な領域を定義します。
• <img>要素のHTMLusemap属性を使用してイメージマップをポイントします。

HTML 画像タグ

タグ	説明
<img>	画像を定義します
<map>	イメージマップを定義します
<area>	イメージマップ内のクリック可能な領域を定義します
<picture>	複数の画像リソースのコンテナを定義します

利用可能なすべてのHTMLタグの完全なリストについては、HTMLタグリファレンスを参照してください。