Search
  1. area〔イメージマップ領域〕
  2. map〔イメージマップの定義〕

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属性
shape属性説明coords属性
circlr円の中心のX座標, 円の中心のY座標, 円の半径
polygon多角形1つめの角ののx座標, 1つ目の角のy座標[, nつ目の角のX座標, nつ目の角のY座標]
rect四角左上のX座標, 左上のY座標, 左下のX座標, 左下のY座標

属性

area要素の属性
属性="値"説明サポート状況必須・任意代替
XHTML 1.0XHTML 1.1
一般属性-STFS任意style属性はCSSで代替。
focusイベントを取得可能な要素のための属性 STFS任意 
shape="%Shape"領域の区切り方を指定。円の場合は"circlr"、多角形の場合は"polygon"、四角の場合は"rect"(デフォルト値)を指定。省略した場合はデフォルト値が適用されます。STFS"rect" 
coords="%Coords"X座標・Y座標を指定。STFS任意 
href="%URI"領域をクリックした時に表示するページのURIまたはアンカーを指定。STFS任意 
nohref="nohref"領域がリンクでないことを示す。STFS任意 
alt="%Text"代替テキストSTFS必須 

map
イメージマップの定義

2008/3/26

構文

<map id='ID名'> ~ </map>

説明

map要素は、クライアントサイドクリッカブルマップを表すインライン要素です。
map要素内には、area要素が1回以上出現する必要があります。
map要素のid属性は、必須属性です。id属性には、関連付ける要素と同じid名を指定します。

属性

map要素の属性
属性="値"説明サポート状況必須・任意代替
XHTML 1.0XHTML 1.1
i18n STFS任意style属性はCSSで代替。
イベント属性 STFS任意style属性はCSSで代替。
id="%ID" STFS必須 
class="%CDATA" STFS任意 
style="%StyleSheet" STFS任意 
title="%Text" STFS任意 
name="%NMTOKEN" STFS任意 

サンプル

<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>
グラフィック 四角 丸 三角

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop