イメージマップ

Manual Version 2.0


ホームページに地図が表示されていて、地図の上をクリックするとクリックした場所に関するページに飛んでいく。そんなページを自分でも作ってみたい!と思っている方へ。

その方法を以下に説明しますので、ホームページの作成に役立てて下さい。

(VISのサーバーは現在Apacheを使用しています。より詳しい設定方法はJApacheのページから辿れます。なお、VISでは現在.htaccessの使用は出来ません。)


必要なもの

  • 画像ファイル(画像フォーマットはgifにしてください)
  • HTMLファイル(画像ファイルを表示するため)
  • マップファイル(リンクさせたい部分の座標とそれに対応したリンク先を記述したファイル)

HTMLファイルの書式

HTMLファイルには、次の様に記述します。


<A HREF="/~taro/maptest.map"> <IMG SRC="mapimage.gif" ISMAP> </A>

なお、
/~taro/maptest.map …………
イメージマップファイル (ここでは、taroさんのディレクトリのmaptest.map)
mapimage.gif …………
画像ファイル
です。


マップファイルの作成

マップファイルの作成方法ですが、マウスを使って範囲を指定するだけでマップファイルを作成してくれるソフトがあるので、それを利用するといいでしょう。

代表的なものとして、以下のソフトがあります。雑誌のCD-ROMやftpなどで手に入れることができます。

UNIX(X Window) mapedit
ftp://ftp.wg.omron.co.jp/pub/net/www/misc/mapedit1.1.2.tar.gz
Macintosh ImageMapper J(Shareware, ¥1,000)
http://www.bridge1.com/
MS-Windows mapedit (Shareware, $25)
http://www.boutell.com/mapedit/http/map32.zip


どうしても手書きで作成したい人は


ImageMapperの使用法

ここでは、Macintosh用のイメージマップファイル作成ソフト ImageMapper の説明をします。

まず、マップとなる画像データを用意します。ImageMapper はGIF、JPEGの他にも大抵の画像フォーマットに対応しています。但しHTMLに載せる画像のフォーマットはGIFもしくはJPEGです。

  1. ImageMapperで、マップを作成したい画像ファイルを開きます。

  2. リンクさせたい部分に円や矩型、多角形を描きます。

  3. ツールボックスから矢印を選んで、リンク先を指定したい図を選択します。

  4. Object EditorウィンドウのTargetタグを選び、リンク先のパスを指定します。(例: test.html、http://www.yahoo.co.jp/)

後は、「Image」メニューで「Generate ImageMap...」を選びます。するとイメージマップの形式を聞いてきますのでNCSAを選択してください。生成されたイメージマップのテキストが表示されます。あとはこれをセーブしてください。
なお、マップファイル名は、必ず「.map」で終わっていなければなりません。


以上、HTML・画像・マップファイルが出来ましたら、御自分のWWW用ホームディレクトリ上に載せてテストしてみてください。

以上でイメージマップの説明は終わりです。


To HOME To CGI Top