クライアントサイド・イメージマップ
area
イメージマップ領域
2008/3/26
構文
<area alt='代替テキスト' />
説明
area要素は、イメージマップ領域を表す要素です。
area要素は、空要素のため<area />のように記述します。
alt属性は、必須属性です。alt属性には代替テキストを指定します。
領域をリンクにする場合は、href属性に、領域をクリックした時に表示するページのURIまたはアンカーを指定します。 target属性には、href属性に指定したリンク先の開き方を指定します。 同窓なら"_self"、別窓なら"_blank"を指定します。
領域をリンクにしない場合は、nohref属性を指定します。
href属性とnohref属性は、一緒に指定することはできませんので注意してください。
shape属性には、領域の区切り方を指定します。
coords属性には、領域のルールに従って、X座標・Y座標などを指定します。
| shape属性 | 説明 | coords属性 |
|---|---|---|
| circlr | 円 | 円の中心のX座標, 円の中心のY座標, 円の半径 |
| polygon | 多角形 | 1つめの角ののx座標, 1つ目の角のy座標[, nつ目の角のX座標, nつ目の角のY座標] |
| rect | 四角 | 左上のX座標, 左上のY座標, 左下のX座標, 左下のY座標 |
属性
| 属性="値" | 説明 | サポート状況 | 必須・任意 | 代替 | |
|---|---|---|---|---|---|
| XHTML 1.0 | XHTML 1.1 | ||||
| 一般属性 | - | STF | S | 任意 | style属性はCSSで代替。 |
| focusイベントを取得可能な要素のための属性 | STF | S | 任意 | ||
| shape="%Shape" | 領域の区切り方を指定。円の場合は"circlr"、多角形の場合は"polygon"、四角の場合は"rect"（デフォルト値）を指定。省略した場合はデフォルト値が適用されます。 | STF | S | "rect" | |
| coords="%Coords" | X座標・Y座標を指定。 | STF | S | 任意 | |
| href="%URI" | 領域をクリックした時に表示するページのURIまたはアンカーを指定。 | STF | S | 任意 | |
| nohref="nohref" | 領域がリンクでないことを示す。 | STF | S | 任意 | |
| alt="%Text" | 代替テキスト | STF | S | 必須 | |
map
イメージマップの定義
2008/3/26
構文
<map id='ID名'> ～ </map>
説明
map要素は、クライアントサイドクリッカブルマップを表すインライン要素です。
map要素内には、area要素が1回以上出現する必要があります。
map要素のid属性は、必須属性です。id属性には、関連付ける要素と同じid名を指定します。
属性
| 属性="値" | 説明 | サポート状況 | 必須・任意 | 代替 | |
|---|---|---|---|---|---|
| XHTML 1.0 | XHTML 1.1 | ||||
| i18n | STF | S | 任意 | style属性はCSSで代替。 | |
| イベント属性 | STF | S | 任意 | style属性はCSSで代替。 | |
| id="%ID" | STF | S | 必須 | ||
| class="%CDATA" | STF | S | 任意 | ||
| style="%StyleSheet" | STF | S | 任意 | ||
| title="%Text" | STF | S | 任意 | ||
| name="%NMTOKEN" | STF | S | 任意 | ||
サンプル
<img src="/content/img/xhtml/graphic.png" width="300" height="200" alt="グラフィック" usemap="#graphic" /> <map id="graphic" name="graphic"> <area shape="rect" coords="161,53,274,108" href="#" alt="四角" /> <area shape="circle" coords="50,57,29" href="http://www.yahoo.co.jp/" target="_blank" alt="丸" /> <area shape="polygon" coords="119,111,87,173,151,174" href="http://www.google.co.jp/" target="_blank" alt="三角" /> </map>
