Clickable Imagemap

クリッカブル・イメージマップ

WWWでイメージを扱った、もう一つの面白い機能にクリッカブルイメージマップ(略してクリッカブルマップ)があります。ハイパーリンクのポイントをイメージにすることができると前に説明しましたが、ポイントが多くなったり、図の中にポイントを持たせくても通常の方法ではできません。このクリッカブルマップはインラインイメージの、ある場所や区画をハイパーリンクのポイントにできる機能を言います。ただし、クリッカブルイメージはイメージを表示できるブラウザにしか動作しません。そのため、イメージを表示できないブラウザ用の補助アンカーを用意すべきです。

NCSA Mosaic ではインラインイメージに JPEG を使用した場合、クリッカブルマップが作成できません。

クリッカブル・イメージマップは次のように作ります。

イメージマップにする絵を作り、どの部分をポイントにするかを決めます。
ポイント部分の座標を書き出します。
座標とURLを記述したイメージマップファイルを作成します。
クリッカブル・イメージマップのテストを行います。

このクリッカブルマップには imagemapユーティリティが必要で、NCSA httpd パッケージに含まれています。まず、imagemap.cをコンパイルしてcgi-binに入れておきます。なお、imagemap.cに imagemap.confファイルの収められる位置が記述されているので(デフォルトは/usr/local/etc/httpd/conf)、別のディレクトリにしたい場合は、この部分を変更して下さい。

イメージマップ

イメージマップは次のフォーマットで作られます。

形状   URL   座標1 座標2 ... 座標n

形状は次の3つのうちの一つで、ポイント部の形状を表します。座標は x,yで表されます。

circle: 円、座標は円の中心と周の座標の二つ
rect: 四角形、上左座標と下右座標の二つ
poly: 多角形、座標は角の点座標、但し100角形までしか作成できません
point: 点
default: 指定されたポイント部以外の部分

rect	`x1,y1 x2,y2`
circle	`x1,y1 x2,y2`
poly	`x1,y1 x2,y2 x3,y3 ... x10,y10`

クリッカブルマップにおけるポイント部の表し方

URLは自身のサーバ資源を表す場合、http://hostnameは省略できます。

イメージマップの作成方法

イメージマップのポイント部を示す座標を知るには、次の方法があります。

XVを利用する方法

XV はイメージをマウスで押えることにより、ポイントの座標が表示されます。表示されたポイントを使ってイメージマップを作成します。

クリッカブルマップ用ツール

クリッカブルマップを簡単に作成するためのツールとして、MS-Windows、X11 ウィンドウには mapeditと呼ばれるツールがあります。GIFイメージを読み込み、マウスで四角、丸、多角形を描き、URLを指定することで自動的にマップファイルが作成されます。 (最新の mapedit はシェアウェアになっています)

mapeditプログラム

マッキントッシュでは、 WebMapと呼ばれるソフトウェアがあります。ただし、このソフトウェアはフリーソフトウェアではありません。

上記以外のクリッカブルマップの編集ツールは下記の通りです。

プログラム	プラットホーム	入手先
Map THIS	Windows	http://galadriel.ecaetc.ohio-state.edu/tc/mt
Web Hotspots	Windows	http://www.hooked.net/users/1auto
MapMaker	X Window (XVが必要)	http://icg.stwing.upenn.edu:80/~mengwong/mapmaker.html
MacMapMaker	Macintosh	ftp://ftp.uwtc.washington.edu/pub/Mac/Network/WWW
Tkmapedit	TCL/TK	ftp.aud.alcatel.com
glorglox	Unix	http://www.uunet.ca/~tomr/glorglox/

マップファイル

イメージマップを作成したら、WWWサーバのconfディレクトリに imagemap.confファイルを作成します。imagemap.confは次のフォーマットで、作成されます。

名前: イメージマップファイル

例えば、次のようになります。

tobira: tobira.map
room: /lab/map/room.map

イメージマップ用HTMLタグ <IMG ISMAP>

HTML文書の中でクリッカブルイメージマップを利用するには、<IMG>タグのISMAP属性を使用します。該当するインラインイメージを読み込む時に、以下のように設定します。

<IMG SRC="URL" ISMAP>

そして、ハイパーリンクを有効にするため、イメージマップファイルで作成した名前を"/cgi-bin/imagemap/"の下に置いて、リンクします。以前の例の"room"の場合、次のようになります。

<A HREF="/cgi-bin/imagemap/room"><IMG SRC="/lab/map/room.gif" 
ISMAP></A>

CERN httpdサーバのクリッカブルマップ

CERNのWWWサーバではhtimageというユーティリティを使用します。マップファイルは、次のようなシンタックスとなっています。

default URL
circle (x,y) r URL
rectangle (x,y) (x,y) URL
polygon (x1,y1) (x2,y2) ... (xN,yN) URL

NCSA WWWサーバとは異なり、座標を括弧で括ります。また、名前が若干異なります。

NCSA httpd	CERN httpd
default	default
circle	circle
rect	rectangle
poly	polygon
point	－

サーバによるポイント部の表し方の違い

クリッカブルマップの例

この写真は筆者の仕事場です。適当な場所をクリックすると説明ページへ移動します。

クリッカブルマップの例(筆者の仕事場)

まず、imagemap.confファイルに
```
mydesk-map:/var/www/mydesk.map
       
```
を記述します。このmydesk-mapが /cgi-bin/imagemap/の下に付けられるマップ名です。

次に実際のマップファイル /var/www/mydesk.mapファイルを作成します。

default /mydesk/mydesk.html
#MugCup
rect /mydesk/magcup.html 54,198 81,226 
#Calender of KDD
poly /mydesk/calendar.html 68,2 71,66 140,72 139,1 
#Gateway2000 P5-120
rect /mydesk/gateway2000.html 38,227 89,324 
#Silicon Graphics INDY
poly /mydesk/SGI.html 272,95 286,84 302,82 302,74 332,75 335,82 356,85 361,99 369,111 361,126 360,148 363,160 387,170 336,175 298,166 279,157 278,144 271,131 262,112 266,100 
#Cisco Manual
poly /mydesk/ciscoman.html 291,212 340,207 361,215 361,223 306,233 290,223 
#Post Chokin-bako
rect /mydesk/post.html 421,139 437,177 
#MAG17S
poly /mydesk/mag17.html 103,94 101,105 94,112 98,172 112,196 226,191 198,169 194,92 105,91 
#DEC OSF1
poly /mydesk/decos.html 197,283 197,314 215,323 250,321 248,299 230,278 
#CFDDI
poly /mydesk/fddi.html 373,274 365,283 373,310 414,324 430,323 431,297 
#Habu's sign
poly /mydesk/habu.html 382,126 414,121 409,161 392,168 377,162 
#Earch
circle /mydesk/earth.html 399,9 424,22

最後に <IMG>タグを使って、クリッカブルマップ部を記述します。

<A HREF="/cgi-bin/imagemap/mydesk-map">
               <IMG SRC="mydesk.gif" ISMAP></A>

[Up] [Next] [Previous]