HTML画像マップ
HTML画像マップを使用すると、画像上にクリック可能な領域を作成できます。
画像マップ
HTML<map>タグは画像マップを定義します。画像マップは、クリック可能な領域がある画像です。エリアは1つ以上の<area>タグで定義されます。
下の画像のコンピューター、電話、またはコーヒーをクリックしてみてください。
例
上記の画像マップの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>要素を使用して定義されます。
形
クリック可能な領域の形状を定義する必要があり、次のいずれかの値を選択できます。
rect-長方形の領域を定義しますcircle-円形領域を定義しますpoly-多角形の領域を定義しますdefault-地域全体を定義します
また、クリック可能な領域を画像に配置できるように、いくつかの座標を定義する必要があります。
Shape = "rect"
の座標shape="rect"はペアになっており、1つはx軸用、もう1つはy軸用です。
したがって、座標34,44は左マージンから34ピクセル、上から44ピクセルに配置されます。
座標270,350は、左マージンから270ピクセル、上から350ピクセルの位置にあります。
これで、クリック可能な長方形の領域を作成するのに十分なデータが得られました。
例
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
これはクリック可能になり、ユーザーを「computer.htm」ページに移動させる領域です。
Shape = "circle"
円の領域を追加するには、最初に円の中心の座標を見つけます。
337,300
次に、円の半径を指定します。
44ピクセル
これで、クリック可能な円形領域を作成するのに十分なデータが得られました。
例
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
これはクリック可能になり、ユーザーを「coffee.htm」ページに移動させる領域です。
Shape = "poly"
にshape="poly"はいくつかの座標点が含まれており、直線（ポリゴン）で形成された形状を作成します。
これは、任意の形状を作成するために使用できます。
クロワッサンの形のように！
下の画像のクロワッサンをクリック可能なリンクにするにはどうすればよいですか？
クロワッサンのすべてのエッジのx座標とy座標を見つける必要があります。
座標はペアで提供され、1つはx軸用、もう1つは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」ページに移動させる領域です。
画像マップとJavaScript
クリック可能な領域は、JavaScript関数をトリガーすることもできます。
click要素にイベントを追加して<area>、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>要素を使用して、画像マップのクリック可能な領域を定義します - 要素のHTML
usemap属性を 使用<img>して、画像マップをポイントします
HTML画像タグ
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
利用可能なすべてのHTMLタグの完全なリストについては、HTMLタグリファレンスにアクセスしてください。