制作者の活動(PR)。

堀北真希ちゃんをうさぎ化した制作者の創作キャラクタ
主な作品

制作者が作ったイラストと動画のサンプル

クリッカブルマップ(イメージマップ)。

クリッカブルマップ(イメージマップ)・目次。

クリッカブルマップ(イメージマップ)とは。

クリッカブルマップ(イメージマップ)とは、画像の特定の箇所を他のリソースと関連付けたものです。

よく、地図の特定の地域を指定すると、当該地区の店舗情報を表示するようになっているウェブページがありますが、それらは多くの場合クリッカブルマップの機能を利用しております。

尚、クリッカブルマップは携帯電話などでは使えません。

クリッカブルマップの種類。

クリッカブルマップには、二つの方法があります。

クライアント側クリッカブルマップ

予めHTML文書でクリッカブルマップの領域とリンク先の関係を明示しておき、ウェブブラウザがクリックされた座標を調べて対応するURLとリンクすると言うものです。

この方法は、予めクリッカブルマップがどのURLとリンクされているかが分かるため、画像表示や二次元的なカーソル操作が不可能或いは困難な場合にも代替措置が執り易いと言う長所があります。

サーヴァ側クリッカブルマップ

サーヴァ側で画像内のどの座標がクリックされたかを調べて処理する方法です。

この方法は予めHTML文書で領域とリンク先の関係を明示する必要が無く、複雑なクリッカブルマップも実現し易いと言う長所があります。

反面、HTML文書には座標とリンク先の関係が明示されないため、代替コンテンツを作る事が困難となり、画像表示や二次元的なカーソル操作が不可能或いは困難な場合には利用出来ない可能性があると言う重大な欠点があります。

ここでは前者のクライアント側クリッカブルマップのみについて解説します。

クリッカブルマップを用いる上での注意事項。

クライアント側クリッカブルマップを実現するに当たって注意すべき事を挙げておきます。

クリッカブルマップを実現する要素。

クライアント側クリッカブルマップを実現するには、以下の要素・属性を用います。

<img usemap="#マップ名">要素…クリッカブルマップの指定。

画像をクライアント側クリッカブルマップにするには、当該画像を埋め込む<img>要素にusemap属性を用いて後述の<map>要素と関連付けます。

例えば、<map id="MAP1" name="MAP1">要素と対応させる場合は、以下のようになります。

… <img alt="国内の支店マップ" src="Japan.GIF" width="320" height="200" usemap="#MAP1" /> …

このとき、属性値の前には「#」が付く事を忘れないで下さい。

尚、usemap属性は、<object>要素でも利用出来ます。この場合、後述の<map>要素は当該<object>要素の内容にしても構いません。

<map>要素…クライアント側クリッカブルマップの定義。

<map>要素は、クライアント側クリッカブルマップの定義です。

内容としては、領域とリンク先の関係を明示する内容となっており、具体的には、

のどちらか片方をを取ります(XHTML 1.0の場合)。

このため、旧いウェブブラウザとの互換性を守るために<area>要素を用いて、クリッカブルマップに対応出来ない環境向けの代替コンテンツを別に記述すると良いでしょう。

具体的には、以下のようになります。

<map name="マップ名" id="マップ名">
    <area alt="代替文字列" shape="領域の形" coords="座標列" href="リンク先URL" />
        …
    </map>

    …
<!-- クリッカブルマップが使えない環境への代替コンテンツ -->
<ul>
    <li><a href="リンク先URL" />代替文字列</a></li>
        …
    </ul>

尚、後半の<ul>要素が代替コンテンツとなっております。

<map>要素に関する補足。

基本的に、<map>要素はクライアント側クリッカブルマップとなる<img>要素が埋め込まれているHTML文書の<body>要素内であれば、当該<img>要素より前に置いても後ろに置いても構いません。

但し、<map>要素はインライン要素となっておりますので、必ず何らかのブロックレヴェル要素内に置く必要があります。

<map>要素には属性として、name属性とid属性が定義されます。

旧式のウェブブラウザではname属性のみを認識しますが、XHTMLではid属性を使う事を推奨しており、このため併記する事となります。

<area>要素…クライアント側クリッカブル領域のリンク領域指定。

<map要素>の直下には領域の数だけこの<area>要素を記述する事になります。

書式は<map要素>で書いた通りですが、改めて説明します。

<area alt="代替文字列" href="リンク先URL" shape="領域の形" coords="座標列" accesskey="アクセスキー" tabindex="タブ移動優先順位" />

<area>要素の属性。

<area>要素の属性は以下の通りとなります。

alt属性

<area>要素のalt属性は、<img>要素でのalt属性同様必須の属性で、クリッカブルマップが使えない場合の代替文字列を指定します。

クリッカブルマップが使えない場合は、この属性値をアンカーとする事が求められております。

ですから、必ずリンク先の意味が分かるように書くべきでしょう。

尚、<area>要素などクリッカブルマップそのものに対応出来ない環境もあるため、alt属性だけでなく、クリッカブルマップを用いないメニューを代替コンテンツとして用意しなければいけない事は言うまでもありません。

href属性

リンク先のURLを指定します。

仕様上は必須ではありませんが、このURLが無いと意味がありません。

shape属性

領域の形を指定します。

値としては以下のようになっております。

default
画面全体を指します。
circle
円領域を指します。
rect
矩形(長方形)領域を指します。
poly
多角形領域を指します。
coords属性

領域の座標などを指します。

shape属性の値により以下のようになります。

"default"の場合
coords属性は付けません。
"circle"の場合
「coords="中心のX座標,同Y座標,半径"」となります。
"rect"の場合
「coords="左上X座標,同Y座標,右下X座標,同Y座標"」となります。
"poly"の場合

「coords="一番目のX座標,同Y座標,二番目のX座標,同Y座標, … ,n番目のX座標,同Y座標"」となります。

これらの点を線分で結んで行った領域が指定されます。

座標はクリッカブルマップとなる画像の左上を(0,0)とした座標となります。従ってマイナスはあり得ません

accesskey属性

キーボードで直接アクセス出来るキーを指定します。<a>要素のaccesskey属性と同じです。

tabindex属性

タブキーを押した際のフォーカス移動の優先順位を指定します。<a>要素のtabindex属性と同じです。

尚、同じクリッカブルマップ内で指定領域が重なってしまう場合は、仕様上前の方を優先する事になっております。

実際のクリッカブルマップの例。

さて、今まで仕様について解説しましたが、実際のクリッカブルマップを具体的に挙げて見ましょう。

このコンテンツの『HTML&CSS入門』の目次をクリッカブルマップで作ったものです。

HTML入門 CSS入門 制作作法
『HTML&CSS入門』目次。

HTML文書では以下のように書かれております。

<img>要素にusemap属性が使われ、その後に<map>要素でイメージマップが定義され、<area>要素でイメージマップが定義されているのが分かります。

<div class="contents"><img alt="『HTML&amp;CSS入門』目次" src="ClickableMap.GIF" width="232" height="89" usemap="#SAMPLE" /></div>
<div class="defMap">
    <map id="SAMPLE" name="SAMPLE">
        <area alt="HTML入門" href="../Introduction/HTML5/index.html" shape="circle" coords="41,45,30" />
        <area alt="CSS入門" href="../Introduction/CSS/index.html" shape="poly" coords="115,17,81,74,149,74" />
        <area alt="制作作法" href="../Introduction/index-WEB.html" shape="rect" coords="159,17,218,75" />
        </map>
    </div>

<dl>
    <dt>『<a href="index.html">HTML&amp;CSS入門</a>』目次。</dt>
    <dd>
        <ul>
            <li><a href="../Introduction/HTML5/index.html">HTML入門</a></li>
            <li><a href="../Introduction/CSS/index.html">CSS入門</a></li>
            <li><a href="../Introduction/index-WEB.html">制作作法</a></li>
            </ul>
        </dd>
    </dl>

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com