イメージマップ

最後にイメージマップの登場です。図をマウスでクリックする と，クリックした場所に応じて違うファイルへ飛びます。 イメージマップではCGIは使いませんので，以外に簡単です。

なお，100校のPANIXマシンでは，下準備として /usr/local/httpd/cgi-binに htimageファイルをコピーしておかなければなりません。

下準備 


  % su
  # cd /usr/local/httpd
  # cp bin/htimage cgi-bin
イメージマップを実現するときに必要なファイルは，以下の3種類 のファイルです。 次のようなディレクトリ構成を前提にしてスクリプトの サンプルを作ってみました。 
usr/local/httpd/
  |
  +--cgi-bin--htimage
  |
  +--htdoc--cgi-test--catmap--+--catmap.html..(1)
                              +--cat.map......(2)
                              +--hazure.html..(3)
                              +--....
イメージマップを表示するHTMLファイルです。
(1) catmap.html [rw-r--r--, 644] 

  <head>
  <title>ねこ</title>
  </head>
  <body>
  
  <center>
  <h1>下のネコにかくされている当たりの場所はどこかな？</h1>
  
  <a href="/cgi-bin/htimage/cgi-test/catmap/cat.map"> ★
  <img src="cat.gif" ismap><p>
  </a>
  
  <a href="cat2.gif">
  [ヒントはここにあるよ]
  </a>
  </center>
  </body>
★：/cgi-bin/htimageの後に，/htdocの下のパスを指定します。

マウスクリックの位置と飛び先の対照表です。
(2) cat.map [rw-r--r--, 644] 


  default /cgi-test/catmap/hazure.html ★
  circle (43, 89) 20 /cgi-test/catmap/migime.html 
  circle (78,112) 15 /cgi-test/catmap/hana.html 
  polygon (97, 48) (148,72) (126, 19) /cgi-test/catmap/hidarimimi.html 
  polygon (42,166) (29, 205) (62, 216) (80, 171) /cgi-test/catmap/migiashi.html
  rectangle (188, 72) (228, 142) /cgi-test/catmap/shippo.html
★：/htdocの下のパスを指定します。

マップからの飛び先のファイルです。
(3) hazure.html [rw-r--r--, 644] 


  <head>
  <title>はずれ</title>
  </head>
  <body>
  <CENTER>
  <H1>ブブー<P>そこにはなんにもないよぉ。</H1>
  <A HREF="/cgi-test/catmap/index.html">もとへもどる</A> ★
  </CENTER>
  </body>
★：/htdocの下のパスを指定します。

Shozo Fukada(sfukada@educ.hiroshima-u.ac.jp)