[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

<web-produce 289> <AREA>タグの書き方 (was Re: 野毛マップ)




On Sun, Jan 16 2000 0:45
	Yasuyuki Suzuki <yassan@noge.com> said:
>
> リンクの張り方がまた巧くいきません。
> 後お願いして宜しいですか?
> (リンクの張り方一山越えないとだめだな)

 マップのリンクの張り方なんて簡単ですよ。要は、
	<AREA 各種パラメータ…>
というタグを、HTML に一つ追加するだけです。

::::::::

<AREA>タグの書き方:

・パターンその1 … 矩形領域

    <AREA SHAPE="rect"
          COORDS="左上x座標,左上y座標,右下x座標,右下y座標"
          HREF="その領域をクリックしたら移動したいページ"
          ALT="その領域の名称">

  例)

    +-----------------------------+
    |JPEG画像                     |
    |           (241,66)          |
    |                +-------+    |
    |                |       |    |
    |                +-------+    |
    |                     (311,79)|
    |                             |
    |                             |
    +-----------------------------+

    <AREA SHAPE="rect"
          COORDS="241,66,311,79"
          HREF="http://www.noge.com/shop/All/banrihoudaitei.html"
          ALT="萬里放題亭">

    ※ HREF のところは、http://www.noge.com を省略した
          /shop/All/banrihoudaitei.html
      でもいい。


・パターンその2 … 多角形

    <AREA SHAPE="polygon"
          COORDS="x座標1,y座標1,x座標2,y座標2,x座標3,y座標3,…"
          HREF="その領域をクリックしたら移動したいページ"
          ALT="その領域の名称">

  例)

    +------------------------------------+
    |JPEG画像                            |
    |         (217,23)  (233,23)         |
    |                +---+               |
    |    (206,40)    |   |(233,40)       |
    |       +--------+   +------+(299,40)|
    |       |   (217,40)        |        |
    |       |                   |        |
    |       +-------------------+        |
    |   (206,54)             (299,54)    |
    +------------------------------------+


    <AREA SHAPE="polygon"
          COORDS="206,40,217,40,217,23,233,23,233,40,299,40,299,54,206,54"
          HREF="/shop/All/kimura-1.html"
          ALT="洋食キムラ 花咲町店">

::::::::

…ということで、拡大マップに店名を追加したり、店名の位置を変更したり
するときの手順は、こうですね。

(1) JPEG拡大図に店名を入れる(もしくは、店名の位置を変更する)。
(2) 修正したJPEG拡大図を、どこか適当な場所に転がす。
(3) 続いて、クリックした後に移動したいエリアを定義した <AREA> タグを
    作り、メールで送るか、適当なテキストファイルにしてどこかに転がす。
(4) すると、古場がそれを拾って
	http://www.noge.com/map/tools/map-area/
    の該当する区画に拾った <AREA> タグを追加し、それを元に HTML を作
    り直す。
(5) 新しいJPEGを正しい場所に配置する。

# (3)の作業は、(今は)僕が新しい画像を睨みながら手元でやってます。

-- 
古場 正行 (こば まさゆき)                           (((((((
  E-mail: koba@hoge.org or koba@noge.com (private)   )∂ ∂)
          masa-k@sag.hitachi-sk.co.jp    (office)   (  v  __
     URL: http://www.noge.com/koba/                  ゝ-〈/