イメージマップを定義した場所とリンク先を指定するarea要素
<area>……</area>
area要素は「client-side image map area」の略で、map内にクライアント側イメージマップの定義した場所のリンク先を指定します。area要素で指定していない領域には、マウスは反応しません。
インライン要素として機能しますが、終了タグはなく空要素として存在します。
例
<html>
<head>
<title>map要素のサンプル</title>
</head>
<body>
<p>
<img src="sample.png" width="376" height="50" alt="サンプル" usemap="#map" />
<map name="map">
<area coords="80,30,193,22" href="/fwcr/design/tag/index.html" shape="rect" alt="map">
<area coords="39,30,20,22" href="/fwcr/design/index.html" shape="rect" alt="map">
</map>
</p>
</body>
</html>
DOMでの参照方法
[window.]document.getElementById（"【ID属性値名】"）
[window.]document.images[i]
オプション属性
| 属性 | 値 | 機能 | 入力例 | DOM参照 |
|---|---|---|---|---|
| shape | "defalut" "rect" "circle" "poly" |
領域の形状 を指定 |
<area coords="80,82,93,92" shape="rect" href="example1.html"> |
[window.]document.getElementById（"【ID属性値名】"）.shape |
| coords | 座標値（※1） | クライアント側 イメージマップ の有効範囲となる 領域の座標を指定 |
<area coords="80,82,93,92" shape="rect" href="example1.html"> |
[window.]document.getElementById（"【ID属性値名】"）.coords |
| href | URI | リンク先を指定 | <area coords="80,82,93,92" shape="rect" href="example1.html"> |
[window.]document.getElementById（"【ID属性値名】"）.href |
| nohref | "nohref" | リンク先がない ことを示す |
<area coords="80,82,93,92" shape="rect" nohref="nohref"> |
[window.]document.getElementById（"【ID属性値名】"）.nohref |
| alt （必須属性） |
代替テキスト | 画像が表示できない ときや音声ブラウザ の代替情報となる テキストを指定 |
<area coords="80,82,93,92" shape="rect" |
[window.]document.getElementById（"【ID属性値名】"）.alt |
- ※1：例えば、shape="rect"の場合、"左上X座標,左上Y座標,右下X座標,右下Y座標Z"となる
追加が可能なイベントハンドラ属性
onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup
有限会社タグパンダ
喜安 亮介
 |
6/6 |
| INDEX | ||
| Web標準HTMLタグリファレンス（6） 画像や動画をサイトに表示させる正しいXHTMLタグ 画像・動画 |
||
| img 画像を読み込むためのimg要素 | ||
| object 外部アセットを読み込むためのobject要素 | ||
| param パラメータを指定するparam要素 | ||
| map クライアント側イメージマップを作成するmap要素 | ||
 |
area イメージマップを定義した場所とリンク先を指定するarea要素 | |
TechTargetジャパン
リッチクライアント & 帳票 フォーラム 新着記事
- 次のモバイルアプリはどのフレームワークで作る？ （2012/5/24）
スマホアプリの開発を容易にするJavaScriptのフレームワークが続々と増えている。それぞれの良さや仕組み、何がどこまでできるのかを徹底解剖する - 「LESS＆専用エディター」でCSSをシンプルに書こう （2012/5/23）
「LESS」はCSS初心者に向けた、シンプルなライブラリだ。「LESS」で、変数などのプログラミングの基礎的な考え方もCSSで学ぼう - 学校が世界一のデジタル環境になったら （2012/5/18）
授業はアーカイブに蓄積され、家からも見られる。家族が授業テーマのアイデアを出す。そんな姿が実現されるかもしれない - 1000万ドル調達も夢じゃないクラウドファウンディング （2012/5/15）
クラウドファンディングは、寄付型でも投資型でもない「購入型」が主流。商品を“開発する前に販売”して開発費用を集める逆転のシステムだ
 |
|
|
|
|
RSSフィード 
＠IT 新着記事
キャリアアップ
スポンサーからのお知らせ
- - PR -
イベントカレンダー
お勧め求人情報
転職／派遣情報を探す
*＊先週の人気講座ランキング＊*
〜 Android編 〜
ホワイトペーパー（TechTargetジャパン）
ソリューションFLASH
Copyright(c)
2000-2012
ITmedia Inc.
著作権はアイティメディア株式会社またはその記事の筆者に属します。（著作権について）
当サイトに掲載されている記事や画像などの無断転載を禁止します。
「＠IT」「＠IT自分戦略研究所」「＠IT情報マネジメント」「JOB＠IT」「＠ITハイブックス」「＠IT MONOist」「ITmedia」「誠」は、アイティメディア株式会社の登録商標です。
当サイトに関するお問い合わせは「＠ITへのお問い合わせ」をご覧ください。
著作権はアイティメディア株式会社またはその記事の筆者に属します。（著作権について）
当サイトに掲載されている記事や画像などの無断転載を禁止します。
「＠IT」「＠IT自分戦略研究所」「＠IT情報マネジメント」「JOB＠IT」「＠ITハイブックス」「＠IT MONOist」「ITmedia」「誠」は、アイティメディア株式会社の登録商標です。
当サイトに関するお問い合わせは「＠ITへのお問い合わせ」をご覧ください。