カスタム検索

<map>タグ

<map>タグの機能と属性
機能 イメージマップの仕様を定義する
属性 HTML-4.01 コア 言語 イベント  name  
XHTML-1.0 言語  イベント  id  class  style  title  name  
備考 XHTML2では廃止になっている

<map>タグはイメージマップを定義します。イメージマップとは、1つの画像の中で複数のリンク先を指定するためのものです。1つの画像を分割して、それぞれにリンク先を割り当てたような表現が可能です。

イメージマップを使用するには、

  1. <img>で画像を配置
  2. <map>で配置した画像にイメージマップを定義
  3. <area>でイメージマップのリンクを定義

という流れになります。そのため、<map>タグは<img>および、<area>とセットで使用されます。<map>は<area>をネストして使用します。

<map>にネストされるタグ
タグ名 機能 詳細
<area> イメージマップのリンクを定義 詳細

name属性

name属性には、<img>タグから参照される名前を指定します。通常、イメージマップを使用する場合、<img>タグのusemap属性に参照する<map>タグを#の付いた形で指定するので、#を除いた部分を記述することになります。

次の例は同一ページ内でリンクさせた例です。<area>タグについての詳細は、<area>タグを参照してください。

map.html
<html>
    <head>
        <title>イメージマップの例</title>
    </head>
    <body>
        <p>A〜Fのどれかをクリックしてください。
        </p>
        <img src="/images/example/map_sample.gif" alt="選択用画像" usemap="#map" />
        <map name="map">
            <area coords="0,0, 199,199" href="#a" />
            <area coords="200,0, 399,199" href="#b" />
            <area coords="0,200, 199,399" href="#c" />
            <area coords="200,200, 399,399" href="#d" />
            <area coords="0,400, 199,599" href="#e" />
            <area coords="200,400, 399,599" href="#f" />
        </map>
        <p id="a">Aがクリックされました。
        </p>
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <p id="b">Bがクリックされました。
        </p>
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <p id="c">Cがクリックされました。
        </p>
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <p id="d">Dがクリックされました。
        </p>
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <p id="e">Eがクリックされました。
        </p>
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <p id="f">Fがクリックされました。
        </p>
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
    </body>
</html>

id属性、class属性、style属性、title属性

共通して使用される属性を参照してください。

CopyLeft 2018 Webデザインレッスン プライバシーポリシー サイト管理者に連絡