Subject   : クリッカブルマップ

カテゴリー  : Home page



クリッカブルマップとは?

クリッカブルマップとはイメージの中のある部分をクリックすることにより指定したURLに ジャンプすることが出来るというものです。 使用例はこちらをご覧ください
IMGタグのオプションとして「USEMAP=」を指定することでその画像ファイルをクリッカブルマップ として使用することが出来ます。

クリッカブルマップの作り方

1.画像ファイル(GIFファイル等)を用意しましょう。
2.HTMLファイルを作成しましょう。
<IMG SRC="画像ファイル名" USEMAP="#マップ名">

<MAP NAME="マップ名">
<AREA SHAPE="形状" COORDS="座標,座標,・・・・" HREF="リンク先ファイル名">
   ・
   ・
   ・
</MAP>

  ●IMGタグに「USEMAP=」を用いてこの画像ファイルをクリッカブルマップにします。
* AREAタグのオプションとして「SHAPE=」に「rect」(=四角形)、「circle」(=円形)、「polygon」(=多角形)、「default」(=指定以外の場所)を指定します。
* 「COORDS=」には「SHAPE=」で指定した領域の位置と大きさを指定します。

3.座標と大きさについて(COORDS=)
  ●形状が四角形「rect」の場合
<AREA SHAPE="rect" COORDS"左上X座標,左上Y座標,右下X座標,右下Y座標" HREF="リンク先ファイル名">

  ●形状が円形「circle」の場合
<AREA SHAPE="circle" COORDS"円の中心X座標,円の中心Y座標,円の半径" HREF="リンク先ファイル名">

  ●形状が多角形「polygon」の場合
<AREA SHAPE="polygon" COORDS"X座標1,Y座標1,X座標2,Y座標2,X座標3,Y座標3,X座標4,Y座標4,X座標5,Y座標5" HREF="リンク先ファイル名">

  ●「default」(=指定以外の場所)を指定した場合
<AREA SHAPE="default" NOHREF>

* 「HREF」の代わりに「NOHREF」と指定すると上の<AREA>で指定されたところ以外がクリックされた時、何もしないという指定になる。

* 座標は PhotoImpact などのソフトで調べることは可能だが、以下のHTMLファイルを座標確認用 で調べることも可能です。

<HTML>
<HEAD><TITLE>座標確認ファイル</TITLE></HEAD>

<A HREF="*.map"><IMG SRC="画像ファイル名" ISMAP></A>

</BODY>
</HTML>


[メニューへ戻る]  [HOMEへ戻る]  [前のページに戻る]