[Up] [Next] [Previous]  [Home]

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

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

NCSA Mosaic ではインラインイメー ジに JPEG を使用した場合、クリッカブルマップが作成できません。
クリッカブル・イメージマップは次のように作ります。
  1. イメージマップにする絵を作り、どの部分をポイントにするかを決め ます。
  2. ポイント部分の座標を書き出します。
  3. 座標とURLを記述したイメージマップファイルを作成します。
  4. クリッカブル・イメージマップのテストを行います。
このクリッカブルマップには imagemapユーティリティが必要で、NCSA httpd パッケージに含まれています。まず、imagemap.cをコンパイル してcgi-binに入れておきます。なお、imagemap.cimagemap.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
MapMakerX 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
サーバによるポイント部の表し方の違い


クリッカブルマップの例

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


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

  1. まず、imagemap.confファイルに
    mydesk-map:/var/www/mydesk.map
           
    を記述します。このmydesk-map/cgi-bin/imagemap/の下に付けられるマップ名です。
  2. 次に実際のマップファイル /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
           

  3. 最後に <IMG>タグを使って、クリッカブルマップ部を 記述します。
    <A HREF="/cgi-bin/imagemap/mydesk-map">
                   <IMG SRC="mydesk.gif" ISMAP></A>
           


[Up] [Next] [Previous]  [Home]