TECH I.S.

HTML イメージ マップ

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

イメージマップ

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

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

例

上記のイメージ マップの HTML ソース コードは次のとおりです。

<img src="workplace.jpg" alt="Workplace" usemap="#workmap"> <map name="workmap">   <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">   <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">   <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm"> </map>

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

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

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

画像

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

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
usemap値は、#ハッシュタグで始まります。その後にイメージマップの名前が続き、イメージとイメージマップ間の関係を作成するために使用されます。

ヒント：任意の画像をイメージ マップとして使用できます。

イメージ マップの作成

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

<map>要素はイメージ マップの作成に使用され、必要なname属性を使って画像にリンクされます。
<map name="workmap">
name属性は、<img>のusemap属性と同じ値でなければいけません。

エリア

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

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

shape

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

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

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

shape="rect"

shape="rect"の座標はペアであり、1つはx軸用、もう1つはy軸用です。

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

Workplace 座標270,350左マージンから270ピクセル、上から350ピクセルの位置にあります。
Workplace これで、クリック可能な長方形の領域を作成するのに十分なデータが得られました。

例

<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">

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

Workplace***

形状="円"

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

337,300
Workplace 次に、円の半径を指定します。 44ピクセル
Workplace これで、クリック可能な円形領域を作成するのに十分なデータが得られました。

例

<area shape="circle" coords="337, 300, 44" href="coffee.htm">

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





Workplace***

shape="poly"

shape="poly"にはいくつかの座標点が含まれており、直線で形成された形状 多角形)を作成します。

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

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

下の画像のクロワッサンをクリック可能なリンクにするにはどうすればよいでしょうか?
French Food
クロワッサンのすべてのエッジのx座標とy座標を見つける必要があります。
French Food
座標は、x軸用とy軸用のペアで提供されます。

例

<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">

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

イメージマップとJavaScript

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

<area>要素にclickイベントを追加して、JavaScript 関数を実行します。

例

ここでは、 onclick属性を使用して、領域がクリックされたときにJavaScript関数を実行します。

<map name="workmap">   <area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()"> </map> <script> function myFunction() {   alert("You clicked the coffee cup!"); } </script>

この章のまとめ

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

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

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



チュートリアル