IT専科TOP>HTML/スタイルシート>HTMLタグ(ABC順)> <map>

<map>

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


ブラウザ

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

▲PageTop

仕様

・構成
要素区分 エンドタグ ネストできる要素 備考
インライン 省略不可 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指定

rect画像 rect指定イメージマップ

2. shapeにcircle指定

circle画像 nohref指定部分 href指定部分

3. shapeにpoly指定

polyイメージ poly指定イメージマップ

▲PageTop

関連項目

HTML

<area> / <a> / <img>

▲PageTop