HTML
Living Standard — Last Updated 19 April 2024
Living Standard — Last Updated 19 April 2024
map要素Support in all current engines.
Support in all current engines.
name — usemap属性から参照するイメージマップの名前 [Exposed =Window ]
interface HTMLMapElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute DOMString name ;
[SameObject ] readonly attribute HTMLCollection areas ;
};map要素は、img要素および任意のarea要素の子孫と連動して、イメージマップを定義する。要素は、その子を表す。
name属性は、マップを参照できるようマップに名前を与える。属性は存在しなければならず、ASCII空白文字なしで非空白の値を持たなければならない。name属性の値は、同じツリーで別のmap要素のname属性の値と同じであってはならない。id属性もまた指定される場合、両方の属性が同じ値を持たなければならない。
map.areasmapのarea要素のHTMLCollectionを返す。
areas属性は、フィルターがarea要素のみに一致する、map要素でルートとなるHTMLCollectionを返さなければならない。
name IDL属性は、同じ名前のコンテンツ属性を反映しなければならない。
イメージマップは、メンテナンスを容易にするために、ページ上の他のコンテンツと組み合わせて定義できる。この例は、ページの上部に、イメージマップと下部のテキストリンクの対応する集合を使用したページである。
<!DOCTYPE HTML>
< HTML LANG = "EN" >
< TITLE > Babies™: Toys</ TITLE >
< HEADER >
< H1 > Toys</ H1 >
< IMG SRC = "/images/menu.gif"
ALT = "Babies™ navigation menu. Select a department to go to its page."
USEMAP = "#NAV" >
</ HEADER >
...
< FOOTER >
< MAP NAME = "NAV" >
< P >
< A HREF = "/clothes/" > Clothes</ A >
< AREA ALT = "Clothes" COORDS = "0,0,100,50" HREF = "/clothes/" > |
< A HREF = "/toys/" > Toys</ A >
< AREA ALT = "Toys" COORDS = "100,0,200,50" HREF = "/toys/" > |
< A HREF = "/food/" > Food</ A >
< AREA ALT = "Food" COORDS = "200,0,300,50" HREF = "/food/" > |
< A HREF = "/books/" > Books</ A >
< AREA ALT = "Books" COORDS = "300,0,400,50" HREF = "/books/" >
</ P >
</ MAP >
</ FOOTER > area要素Support in all current engines.
Support in all current engines.
map要素が存在する場合のみに限る。alt — 画像が利用不可である場合に使用する代用テキストcoords — イメージマップ内に作成する図形の座標shape — イメージマップ内に作成する図形の種類href — ハイパーリンクのアドレスtarget — ハイパーリンクナビゲーションに対するナビゲート可能download — リソースをナビゲートする代わりにダウンロードし、その場合リソースのファイル名にするかどうかping — URLへのpingrel — ハイパーリンクを含む文書における位置と宛先のリソースの関係referrerpolicy — 要素によって開始されたフェッチのためのリファラーポリシーhref属性を持つ場合：著者向け、実装者向け[Exposed =Window ]
interface HTMLAreaElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute DOMString alt ;
[CEReactions ] attribute DOMString coords ;
[CEReactions ] attribute DOMString shape ;
[CEReactions ] attribute DOMString target ;
[CEReactions ] attribute DOMString download ;
[CEReactions ] attribute USVString ping ;
[CEReactions ] attribute DOMString rel ;
[SameObject , PutForwards =value ] readonly attribute DOMTokenList relList ;
[CEReactions ] attribute DOMString referrerPolicy ;
// also has obsolete members
};
HTMLAreaElement includes HTMLHyperlinkElementUtils ;area要素は、テキストとイメージマップで領域に対応をもつハイパーリンク、またはイメージマップ上の不感領域のいずれかを表す。
親ノードとともにarea要素は、map要素の祖先を持たなければならない。
area要素がhref属性を持つ場合、area要素はハイパーリンクを表す。この場合、alt属性が存在しなければならない。この属性は、ハイパーリンクのテキストを指定する。属性値は、イメージマップの他のハイパーリンクに指定されるテキストを伴い、かつ画像の代替テキストを伴うが、画像なしで提示された場合、テキストでなければならず、テキストなしだが画像に適用される形状を伴うような場合、ハイパーリンクとして同じ選択の種類をユーザーに提供しなければならない。同じリソースを指すイメージマップと非空白のalt属性を持つ別のarea要素が存在する場合、alt属性は空白のままであってもよい。
area要素がhref属性を持たない場合、その要素によって表される領域を選択できず、alt属性を省略しなければならない。
どちらの場合も、shapeとcoords属性は領域を指定する。
The shape attribute is an enumerated attribute with the following keywords and states:
| キーワード | Conforming | 状態 | 概要 |
|---|---|---|---|
circle | Circle state | Designates a circle, using exactly three integers in the coords attribute. | |
circ | No | ||
default | Default state | This area is the whole image. (The coords attribute is not used.) | |
poly | Polygon state | Designates a polygon, using at-least six integers in the coords attribute. | |
polygon | No | ||
rect | Rectangle state | Designates a rectangle, using exactly four integers in the coords attribute. | |
rectangle | No |
The attribute's missing value default and invalid value default are both the rectangle state.
coords属性が指定される場合、浮動小数点数の妥当なリストを含まなければならない。この属性は、shape属性によって記述された図形の座標を与える。この属性に対する処理は、イメージマップ処理モデルの一部として説明される。
circle stateにおいて、area要素は、最後の整数は非負でなければならない、3つの整数とともに、存在するcoords属性を持たなければならない。最初の整数は画像の左端から円の中心までのCSSピクセル単位距離でなければならず、2番目の整数は画像の上端から円の中心までのCSSピクセル単位距離でなければならず、3番目の整数はCSSピクセル単位距離で円の半径でなければならない。
default stateにおいて、area要素はcoords属性を持ってはならない。（領域は全体の画像である。）
polygon stateにおいて、area要素は少なくとも6つの整数をもつcoords属性を持たなければならず、その整数は偶数個でなければならない。整数の各ペアは、CSSピクセルでそれぞれ画像の左からおよび上からの距離として指定された座標を表さなければならず、順に、すべての座標はポリゴンの点を表さなければならない。
rectangle stateにおいて、area要素は正確に4つの整数をもつcoords属性を持たなければならない。1番目の整数は3番目の整数未満でなければならず、2番目の整数は4番目の整数未満でなければならない。4点は、それぞれすべてCSSピクセルで、矩形の左側から画像の左辺までの距離、上側から上辺までの距離、左側から左辺までの距離、下側から上辺までの距離を表さなければならない。
When user agents allow users to follow hyperlinks or download hyperlinks created using the area element, the href, target, download, and ping attributes decide how the link is followed. rel属性は、ユーザーがリンクをたどる前に対象のリソースの見込みのある性質をユーザーに表すために使用されてもよい。
href属性が存在しない場合、target、download、ping、rel、およびreferrerpolicy属性は省略しなければならない。
area要素でitempropが指定される場合、href属性も指定されなければならない。
Support in all current engines.
IDL属性alt、coords、target、download、ping、およびrel、は、同じ名前のそれぞれのコンテンツ属性を反映しなければならない。
IDL属性shapeは、shapeコンテンツ属性を反映しなければならない。
Support in all current engines.
IDL属性relListは、relコンテンツ属性を反映しなければならない。
HTMLAreaElement/referrerPolicy
Support in all current engines.
IDL属性referrerPolicyは、既知の値に制限され、referrerpolicyコンテンツ属性を反映しなければならない。
イメージマップは、ハイパーリンクに関連付けられるような画像で幾何学的な領域を可能にする。
img要素の形式において、画像は、img要素上でusemap属性を指定することにより（map 要素の形式で）イメージマップに関連付けてもよい。usemap属性が指定される場合、map要素に妥当なハッシュ名の参照でなければならない。
次のような画像を考えてみよう：
色付きの領域のみをクリック可能にしたい場合、次のようにするだろう：
< p >
Please select a shape:
< img src = "shapes.png" usemap = "#shapes"
alt = "Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star." >
< map name = "shapes" >
< area shape = rect coords = "50,50,100,100" > <!-- the hole in the red box -->
< area shape = rect coords = "25,25,125,125" href = "red.html" alt = "Red box." >
< area shape = circle coords = "200,75,50" href = "green.html" alt = "Green circle." >
< area shape = poly coords = "325,25,262,125,388,125" href = "blue.html" alt = "Blue triangle." >
< area shape = poly coords = "450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
href = "yellow.html" alt = "Yellow star." >
</ map >
</ p > If an img element has a usemap attribute specified, user agents must process it as follows:
Parse the attribute's value using the rules for parsing a hash-name reference to a map element, with the element as the context node. This will return either an element (the map) or null.
If that returned null, then return. 画像は、結局のところイメージマップに関連付けられない。
そうでなければ、ユーザーエージェントは、mapの子孫である全area要素を収集しなければならない。それらをareasにする。
イメージマップ（areas）を形成するarea要素のリストを取得した、対話的なユーザーエージェントは、2つのうちどちらかの方法でリストを処理しなければならない。
ユーザーエージェントがimg要素が表すテキストを表示しようとする場合、次の手順を使用しなければならない。
href属性で同じ値をもつおよび空でないalt属性も持つareasにおける別のareaの要素が存在する場合、alt属性を持たないまたはそのalt属性の値が空文字列である、areasにおけるすべてのarea要素を削除する。
areasにおける残りの各area要素は、ハイパーリンクを表す。このハイパーリンクは、すべてのimgのテキストに関連した方法でユーザーに利用できるようにすべきである。
In this context, user agents may represent area and img elements with no specified alt attributes, or whose alt attributes are the empty string or some other non-visible text, in an implementation-defined fashion intended to indicate the lack of suitable author-provided text.
ユーザーエージェントが画像を表示することを意図し、かつハイパーリンクを選択する画像との相互作用を可能にする場合、その画像は、逆ツリー順で、areasでarea要素から採取した、層状の形状の集合に関連付けられなければならない（よって、ツリー順に、mapにおける最後に指定されたarea要素が一番下の形状であり、かつmapにおける最初の要素が最上位の形状である）。
areasにおける各area要素は、画像の上に層状にする形状を得るために、次のように処理されなければならない：
要素のshape属性が表す状態を検索する。
存在する場合、要素のcoords属性を解析するために浮動小数点数のリストを解析するための規則を使用し、結果をcoordsリストにする。属性が存在しない場合、coordsリストを空のリストにする。
If the number of items in the coords list is less than the minimum number given for the area element's current state, as per the following table, then the shape is empty; return.
| 状態 | 最小項目数 |
|---|---|
| Circle state | 3 |
| Default state | 0 |
| Polygon state | 6 |
| Rectangle state | 4 |
shape属性の状態に対応する次のリストにおけるエントリーごとにcoordsリストにおける過剰項目をチェックする。
shape属性がrectangle stateを表し、かつリストの最初の数がリストの3番目の数よりも数値的に大きい場合、周りでこの2つの数値を交換する。
shape属性がrectangle stateを表し、かつリストの2番目の数がリストの4番目の数よりも数値的に小さい場合、周りでこの2つの数値を交換する。
If the shape attribute represents the circle state, and the third number in the list is less than or equal to zero, then the shape is empty; return.
さて、要素によって表される形状は、shape属性の状態に対応する次のリストの項目について説明されるいずれかである。
xをcoordsにおける最初の数字にし、yを2番目に数字にし、rを3番目の数字にする。
The shape is a circle whose center is x CSS pixels from the left edge of the image and y CSS pixels from the top edge of the image, and whose radius is r CSS pixels.
形状は、正確に画像全体を覆う長方形である。
xiをcoordsで(2i)番目のエントリーにし、yiをcoordsで(2i+1)番目のエントリーにする（インデックス0をもつ1つであるcoordsの最初のエントリー）。
Let the coordinates be (xi, yi), interpreted in CSS pixels measured from the top left of the image, for all integer values of i from 0 to (N/2)-1, where N is the number of items in coords.
形状は、頂点が奇偶規則を使用して確立された、頂点がthe coordinatesで与えられる多角形である。[GRAPHICS]
x1をcoordsの最初の数、y1を2番目の数、x2を3番目の数、およびy2を4番目の数にする。
The shape is a rectangle whose top-left corner is given by the coordinate (x1, y1) and whose bottom right corner is given by the coordinate (x2, y2), those coordinates being interpreted as CSS pixels from the top left corner of the image.
For historical reasons, the coordinates must be interpreted relative to the displayed image after any stretching caused by the CSS 'width' and 'height' properties (or, for non-CSS browsers, the image element's width and height attributes — CSS browsers map those attributes to the aforementioned CSS properties).
ブラウザーのズーム機能および変換は、座標に影響しないCSSまたはSVGを使用して適用される。
その点を覆う形状が存在しない場合、上記のアルゴリズムごとに積層形状の集合に関連する画像をもつポインティングデバイス作用は、ポインティングデバイスが指示した点、もしあれば、または画像要素自身を覆う最上位の形状に最初に発火される関連するユーザーとの対話イベントをもたらさなければならない。ユーザーエージェントはまた、（例えば、キーボードを使用して）ハイパーリンクを表す個々のarea要素を選択してアクティブにすることを可能にしてもよい。
Because a map element (and its area elements) can be associated with multiple img elements, it is possible for an area element to correspond to multiple focusable areas of the document.
イメージマップはライブである。DOMが突然変異される場合、ユーザーエージェントは、あたかもイメージマップに対するアルゴリズムを再実行したかのように動作しなければならない。