イメージマップの作成/HTML基礎講座

１枚の画像の中に複数のホットリンクを用いるイマージマップについて解説します。イメージマップはクリッカブルマップとも呼ばれています。イメージマップには次の２つの手法があります。

サーバ・サイド・イメージマップ

サーバの CGIプログラムを呼び出して、ユーザがクリックしたときに送信され新たなページへ導きます。プログラム作成は簡単ではないため、一般的ではありません。

クライアント・サイド・イメージマップ

クライアントとはユーザの総称で、ブラウザも含まれます。この手法は、HTMLに記述されるもので、特別なプログラムを必要としないため、応答が速く一般的な手法といえます。

この節では、後者のクライアント・サイド・イメージマップについて解説します。

■ クライアント・サイド・イメージマップの作成

左の画像の中にホットリンクが４つあります。いずれもクリックするとそのページにリンクします。

このように、画像の中でホットリンクを指定する手法をイメージマップと呼びます。ホットリンクを設定してある領域を見れば分かると思いますが、四角形、円形、多角形があり、その領域を、HTMLでは area要素で記述します。

初心者にとっては画像中にホットリンクを設定するのは専用のソフトを利用するといいのですが、下記の要領を参考にしてください。

イメージマップを作成するための基本的な知識として、画像上の座標という概念を知る必要があります。

左の四角形の図では、左から aピクセル、上から　bピクセルの座標を (a,b) 、次に、右下の座標、左から、Cピクセル、上から　dピクセルに座標を (c,d) として四角形の図を定義します。

これを実現する HTML構文は　<area shape="rect" coords="a,b,c,d">

次に真中の円形の図は、左から aピクセル、上から　bピクセル、そして半径　cピクセルとします。 HTMLでは　<area shape="circle" coords="a,b,c">

右の三角形は多角形として扱い、それぞれの角の座標を記述します。

HTMLでは　<area shape="poly" coords="a,b,c,d,e,f">

このようにして、１つの画像の中に示された座標軸にホットリンクを埋め込んだものをクライアント・サイドイメージマップと呼びます。

■ イメージマップのアクセシビリティ

非視覚系ブラウザと呼ばれるソフトウェアを使う閲覧者では、イメージマップで利用する画像をレンダリングすることができません。そうした場合にも、適切なナビゲーションを用意するように心がけましょう。

マップのナビゲーションを定義する area要素には、代替となる適切なリンク先情報をテキストで用意します。また、画像とは別のテキストベースのナビゲーションも、合わせて用意することも重要です。

作者だけの環境で作成することなく、広く多くの環境を意識したナビゲーションを構築するように心がけましょう。

初版公開日 2002年9月23日最新更新日 2004年3月7日

■ イメージマップの作成