画像にリンクを張るには,<IMG> を <A> でくくればよいのだが,ここで扱うイメージマップは,画像全体でなく,その個々の部分に対してジャンプを設定するものである。
画像の領域にリンクなどを結びつけるイメージマップには,サーバが処理をするもの(サーバサイドイメージマップ)とクライアント(UA)が処理をするもの(クライアントサイドイメージマップ)がある。
かつては,サーバサイドのものが多く使われていたが,今では圧倒的にクライアントサイドのものが利用される。簡便だからということもあるのだが,それよりノングラフィカルな UA に対しての記述がしやすいこと,サーバとわざわざやりとりする必要がないので反応が迅速であるという点から,クライアントサイドイメージマップのほうが好ましいとされる。
まずは,クライアントサイドイメージマップについて解説しよう。
クライアントサイドイメージマップは,“イメージマップの設計図”と“画像”を重ね合わせて作る。画像を用意しておいて,それに,“この領域はそこへのジャンプ”のような記述を重ね合わせるのである。
画像は問題ないとして,その“設計図”は次の要素で定義することになる。
<MAP>...</MAP>
<MAP> は次の属性をもつ。
属性 | 値 | 解説 |
---|---|---|
NAME | 文字列 | 画像からあとで参照するときに使う,イメージマップの定義に対する一意な名前。必須。 |
<MAP> はインライン要素で,空であってはいけない。<MAP> だけでは“ここから〜ここまでがイメージマップの設計図”であることしか言っていないので,その内容は,イメージマップの具体的な動作を記述するものが含まれなくてはならない。HTML 4.01 では,<MAP> の直下には,<AREA> およびブロック要素を混在させることができる。領域の指定は,<AREA> または <A> で行う。
HTML 4.0 では,<MAP> の直下は <AREA> だけをとるか,または,ブロック要素をとって <A> で領域を指定するかのいずれかである(混在は許されない)。
まずは,<AREA> の書き方から見ていこう。
<AREA> は <MAP> の中にしか書かれ得ない。
<AREA>
これは,“ここに”のかたちをしている(終了タグを持たない)。
<AREA> に与えられる属性がイメージマップの具体的な設定である。
属性 | 値 | 解説 |
---|---|---|
SHAPE | キーワード | これから指定する領域がどんなかたちをしているかを示す。 |
COORDS | 長さ(複数) | SHAPE 属性で示された形を座標で指定する。形状によって与え方は異なる。 |
HREF | URI | 領域にリンクされたリソースへの URI。 |
NOHREF | ブール値 | その領域には何の動作も関係づけられていないことを示す。 |
ALT | 文字列 | その領域に対する代替テキスト。必須。 |
onFocus | スクリプト | その領域がフォーカスを得たときに実行されるスクリプトを与えるイベント属性。 |
onBlur | スクリプト | その領域がフォーカスを失ったときに実行されるスクリプトを与えるイベント属性。 |
まず,SHAPE 属性であるが,次の値を指定しうる。
SHAPE 属性が default 以外のときは,COORDS 属性で座標を与える必要がある。これは複雑なので,次の Section でゆっくり解説することにしよう。
HREF 属性は <A> のものと同じであるが,NOHREF 属性という見慣れないものが登場している。イメージマップを作るときとくに何も指定されなかった領域は何の反応もしないのであるが,ときにはすでに指定された領域からある領域を取り除くということが必要になる場合もある。このような場合,NOHREF 属性で領域をくりぬいてしまう,というようなことをする。
イメージマップというのは画像が出なければ始まらず,しかも <AREA> 内は表示されないのだから,ノングラフィカルな UA では何がなんだかわからない。したがって,ALT 属性は忘れず指定しなくてはならない。