<map>

イメージマップの識別名を指定することができます。この要素で指定した識別名は、usemap属性と一致しなければなりません。

ブラウザ

IE3 / IE4 / IE5 / ID5.5 / IE6 / N3 / N4 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac

仕様

・構成
要素区分	エンドタグ	ネストできる要素	備考
インライン	省略不可	`block` か<area>要素が出現しなければならない。

・属性
属性名	必須	意味	値
name	○	イメージマップの識別名	任意のテキスト
class		class名	スタイルシートを設定したclass名
id		id名	スタイルシートを設定したid名もしくは、任意のテキスト
title		説明文	任意のテキスト
style		スタイル	任意のスタイル
lang		言語コード	例(日本語)：ja
dir		読む方向	`rtl` 右から左に読む `ltr` 左から右に読む

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
  </head>
  <body>
    <p>1. shapeにrect指定</p>
    <img src="../../../../images/development/htmlcss/map-image-rect.gif" alt="rect画像" usemap="#map-TEST1" width="243" height="68">
    <map name="map-TEST1">
      <area alt="rect指定イメージマップ" shape="rect" coords="45,17,142,47" href="../../../../">
    </map>
    <br>
    <p>2. shapeにcircle指定</p>
    <img src="../../../../images/development/htmlcss/map-image-circle.gif" alt="circle画像" usemap="#map-TEST2" width="243" height="68">
    <map name="map-TEST2">
      <area alt="nohref指定部分" shape="circle" coords="54,35,15" nohref>
      <area alt="href指定部分" shape="circle" coords="54,35,26" href="../../../../">
    </map>
    <br>
    <p>3. shapeにpoly指定</p>
    <img src="../../../../images/development/htmlcss/map-image-poly.gif" alt="polyイメージ" usemap="#map-TEST3" width="243" height="68">
    <map name="map-TEST3">
      <area alt="poly指定イメージマップ" shape="poly" coords="164,30,166,46,177,54,192,54,203,47,206,33,199,20,187,13,172,18,164,30"
       href="../../../../">
    </map>
  </body>
</html>

表示結果

1. shapeにrect指定

2. shapeにcircle指定

3. shapeにpoly指定

▲PageTop

<map>

ブラウザ

仕様

サンプル

ソースコード

表示結果

関連項目

HTML