Living Standard — Last Updated 12 December 2024
map
elementSupport 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.areas
map
の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
elementSupport in all current engines.
Support in all current engines.
map
要素が存在する場合のみに限る。alt
— 画像が利用不可である場合に使用する代用テキストcoords
— イメージマップ内に作成する図形の座標shape
— イメージマップ内に作成する図形の種類href
— ハイパーリンクのアドレスtarget
— Navigable for hyperlink navigationdownload
— Whether to download the resource instead of navigating to it, and its filename if soping
— URLへのpingrel
— ハイパーリンクを含む文書における位置と宛先のリソースの関係referrerpolicy
— 要素によって開始されたフェッチのためのリファラポリシーhref
attribute: for authors; for implementers.[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ピクセル単位距離で円の半径でなければならない。
In the default state, area
elements must not have a coords
attribute. (領域は全体の画像である。)
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.
The IDL attributes alt
, coords
, shape
, target
, download
, ping
, and rel
, each must reflect the respective content attributes of the same name.
Support in all current engines.
IDL属性relList
は、rel
コンテンツ属性を反映しなければならない。
HTMLAreaElement/referrerPolicy
Support in all current engines.
IDL属性referrerPolicy
は、既知の値に制限され、referrerpolicy
コンテンツ属性を反映しなければならない。
イメージマップは、ハイパーリンクに関連付けられるような画像で幾何学的な領域を可能にする。
An image, in the form of an img
element, may be associated with an image map (in the form of a map
element) by specifying a usemap
attribute on the img
element. The usemap
attribute, if specified, must be a valid hash-name reference to a map
element.
次のような画像を考えてみよう:
色付きの領域のみをクリック可能にしたい場合、次のようにするだろう:
< 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が突然変異される場合、ユーザーエージェントは、あたかもイメージマップに対するアルゴリズムを再実行したかのように動作しなければならない。