HTML 5でのクライアント側クリッカブルマップ。

HTML 3.2でのクライアント側クリッカブルマップの仕様。

HTMLの公式仕様で初めてクライアント側クリッカブルマップが定められたのはHTML 3.2でした。

• サーヴァ側クリッカブルマップについては、初めての公式規格であったHTML 2.0で既に定められておりました。

HTML 3.2は、主に当時の二大ウェブブラウザとされたネットスケープ・ナヴィゲータとインターネット・エクスプローラの双方での実装を勘案して定められた規格でしたが、当時のこれらの実装に合わせているためか、非常に単純なものでした。

1. クリッカブルマップとしたい画像を埋め込む<img>要素に usemap 属性でマップの内容となる<map>要素のname属性値を与える事で関連付ける。
2. 画像と関連付けられた<map>要素では、画像の対応する領域とリンク先を<area>要素で指定する。

当時、ネットスケープ・ナヴィゲータはmap>要素の内容のうち<area>要素以外を認識しなかったためか、このような規格となっていたのです。

一応、<area>要素には非グラフィカルなユーザエージェントのためにalt属性を必須としておりましたが、<map>要素に全く対応出来ない環境までは対応出来ないものでした。

HTML 4でのクライアント側クリッカブルマップの仕様。

HTMLのアクセシビリティに最大限に配慮した規格とされるHTML 4では、クリッカブルマップも大幅に拡張されました。

クリッカブルマップとして使える埋め込み要素として、<img>要素以外にも<object>要素などでも可能になりましたが、それ以上に特筆すべきは、<map>要素の内容モデルの大幅な拡張でしょう。

HTML 4での<map>要素の内容モデルは、以下のものとなりました：

<area>要素

従来のクリッカブルマップ対応環境でも対応出来る記述です。

ブロックレヴェル要素

この中には、shape 属性及び coords 属性を持つ<a>要素を含める事で、クリッカブルマップに対応していない環境では通常のリンクアンカーで対応出来るようにしております。

この内容は、クリッカブルマップの対応の可否を問わず、常にレンダリングされる事が求められております。

• 勿論、スタイルシート言語で非表示にする事は出来ますが。

尚、これらは必ずしも片方のみにする必要はなく、双方を入れても良い事とされておりました。

その場合、HTML 4に対応している環境では、ブロックレヴェル要素を優先し、<area>要素を無効とする事が求められておりました。

• 但し、HTML 4時代より前の世代の環境では<area>要素を認識せざるを得ないので、<area>要素の記述は必ずしも無駄とは言えませんでした。

例えば、以下のような感じになります。

<h1>サイト案内</h1>
    …
<h2 id="MENU">メニュー</h2>
<dl>
    <dt class="MENU_IMAGE"><img alt="サイト案内" src="Map.GIF" width="480" height="320" usemap="#MENU_MAP"></dt>
    <dd>
        <map name="MENU_MAP">
            <!-- HTML 4 対応環境/クリッカブルマップ非対応環境向け -->
            <dl>
                <dt><a href="Info/index.html" shape="rect" coords="10, 20, 480, 40 ">当サイトについて</a></dt>
                <dd>平成23年 1月14日更新</dd>
                <dt><a href="HORIKITA/index.html" shape="rect" coords="10, 60, 220, 300 ">堀北真希ちゃんについて</a></dt>
                <dd>平成23年 3月 9日更新</dd>
                <dt><a href="Illustrations/index.html" shape="rect" coords="260, 20, 460, 300 ">イラストコンテンツ</a></dt>
                <dd>平成23年 4月22日更新</dd>
                …
                </dl>
            <!-- クリッカブルマップに対応したHTML 4 非対応環境向け -->
            <area href="Info/index.html" shape="rect" coords="10, 20, 480, 40 " alt="当サイトについて">
            <area href="Info/index.html" shape="rect" coords="10, 60, 220, 300 " alt="堀北真希ちゃんについて">
            <area href="Info/index.html" shape="rect" coords="260, 20, 460, 300 " alt="イラストコンテンツ">
                …
            </map>
        <dd>
    </dl>

尚、<map>要素はインライン要素とされておりましたので、当然ブロックレヴェル要素の内容となる必要があります。

ここでは、マップの画像を含めて<dl>要素とする事で対応しております。

XHTML 1.0でのクライアント側クリッカブルマップの仕様。

HTML 4.01のXML化とされるXHTML 1.0ですが、クリッカブルマップに関してだけは、仕様に変更を与えております。

XHTML 1.0の仕様書を見る限りでは、クリッカブルマップの仕様について変更されたとは全く書かれていないのですが、XHTML 1.0のDTDを読むと、少なからぬ仕様の変更が明らかになります：

具体的には、以下の二つとなります。

一つは、<map>要素には、id属性でマップ名を表す事が必須とされている事です。

従来の name属性は必須ではなくなりましたが、後方互換性のため残されております。

• ですから、XHTML 1.0文書では双方に同じ値を記述する事が勧められます。

具体的には、<map>要素の内容モデルを以下のいずれかとする事と変更されているのです。

一個以上の<area>要素

従来のクリッカブルマップ対応環境でも対応出来る記述です。

一個以上のブロックレヴェル要素

ここで言うブロックレヴェル要素とは、通常のブロックレヴェル要素だけでなく、

• <form>要素
• <ins>要素
• <del>要素
• <script>要素
• <noscript>要素

も含まれるものとします。

• XHTML 1.0ではDTDの制約からか、<form>要素などを通常のブロックレヴェル要素とは別に扱っております。

この内容については、HTML 4.01の場合と同様、shape 属性及び coords 属性を持つ<a>要素を含める事で、クリッカブルマップに対応していない環境では通常のリンクアンカーで対応出来るようにしております。

従って、XHTML 1.0文書でクリッカブルマップを実現するには、

• <a>要素を含んだブロックレヴェル要素を用いて旧来の環境ではこれに依るテキストリンクで代用してもらうか
• <area>要素を用いて非クリッカブルマップ対応環境でのアクセシビリティを犠牲にする

のいずれかとなってしまいます。

• まぁ個人的には旧来の環境が激減している事を考えれば、ブロックレヴェル要素を用いる方が遙かに良いと思いますが。

XHTML 1.1でのクライアント側クリッカブルマップの仕様。

XHTML 1.1は、XHTML 1.0と違い、在来のHTMLの代用として使う事を想定しておりません。

このため、XMLに対応していない環境については考慮されない事となります。

結果、XHTML 1.1では、クリッカブルマップの仕様が更に変更されました。

具体的には、<img>要素などでクリッカブルマップと関連付けるための usemap属性が、URIに変更されました。

実際には、外部の文書内にあるマップ情報を得る事は出来ない場合が多いので、こちらについては実は余り変化があるとは言えません。

また、<map>要素が name 属性を廃止しております。

この結果、在来のHTMLの代用として使った場合、 name属性しか認識しない旧来のウェブブラウザでは機能しない事となります。

• もっとも、XHTML 1.1を在来HTMLの代用として使うのが間違いと言えるので、XHTML 1.1を責める事は出来ませんが。

また、map 要素の内容モデルは、

• <map>要素
• ブロックレヴェル要素など

を双方含んでも良いと言う仕様に戻されました。

HTML 5でのクライアント側クリッカブルマップの記述例。

以上を踏まえると、HTML 4での記述例はHTML 5では以下のようにする事となります。

<h1>サイト案内</h1>
    …
<nav id="MENU">
    <h2>メニュー</h2>
    <figure id="MENU_IMAGE">
        <img alt="サイト案内" src="Map.GIF" width="480" height="320" usemap="#MENU_MAP" />
        </figure>
    <map name="MENU_MAP">
        <!-- クリッカブルマップ非対応環境向け -->
        <dl>
            <dt><a href="Info/index.html">当サイトについて</a></dt>
            <dd>平成23年 1月14日更新</dd>
            <dt><a href="HORIKITA/index.html">堀北真希ちゃんについて</a></dt>
            <dd>平成23年 3月 9日更新</dd>
            <dt><a href="Illustrations/index.html">イラストコンテンツ</a></dt>
            <dd>平成23年 4月22日更新</dd>
            …
            </dl>
        <!-- クリッカブルマップ対応環境向け -->
        <area href="Info/index.html" shape="rect" coords="10, 20, 480, 40 " alt="当サイトについて" />
        <area href="Info/index.html" shape="rect" coords="10, 60, 220, 300 " alt="堀北真希ちゃんについて" />
        <area href="Info/index.html" shape="rect" coords="260, 20, 460, 300 " alt="イラストコンテンツ" />
            …
        </map>
    </nav>