<map>タグ

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

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

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

<img>で画像を配置
<map>で配置した画像にイメージマップを定義
<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属性

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

<a>

ページの先頭

<area>

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