クリッカブルマップ

トップページ→画像に関する事例集→クリッカブルマップ

３．３クリッカブルマップ

サンプル表示

画像上の特定の場所をクリックすると別のページにリンクするのが、クリッカブルマップです。先ず、サンプルを見てみましょう。

これを実現するＨＴＭＬは次のとおりです。

<IMG SRC="画像ファイル名" USEMAP="#linkmap">
<MAP NAME="linkmap">
<AREA SHAPE=rect COORDS="x1,y1,x2,y2" HREF="リンク先ファイル名">
<AREA SHAPE=circle COORDS="x,y,r" HREF="リンク先ファイル名">
<AREA SHAPE=polygon COORDS="x1,y1,x2,y2,x3,y3" HREF="リンク先ファイル名">
</MAP>

<IMG>タグで画像を表示させます。
USEMAP="#linkmap",MAP NAME="linkmap"：画像に名前を付けます。複数ある場合に区別できます。
SHAPE=rect：四角形の範囲を指定します。対角にある２点(x1,y1),(x2,y2)の座標で指定します。
SHAPE=circle：円形の範囲を指定します。中心(x,y)座標と半径(r)で指定します。
SHAPE=polygon：多角形の範囲を指定します。各頂点(x1,y1),(x2,y2),(x3,y3)…座標で指定します。
座標は画像の左上を(0,0)とし、そこからのピクセル数で表します。

ブラウザ対応表

ブラウザ	IE			Netscape		Opera
バージョン	5.00	5.50	6.0	6.2.3	7.01	6.06	7.21
対応	○	○	○	○	○	○	○

トップページへ

背景に関する事例集
文字に関する事例集
画像に関する事例集
リンクに関する事例集
ページ制御に関する事例集
その他の事例集

３．１重ねて表示する
３．２マウスで画像を替える
３．３クリッカブルマップ
３．４画像の横に文字を表示する
３．５画像を額縁に入れる