Network Working Group                                         J. Seidman
Request for Comments: 1980                                Spyglass, Inc.
Category: Informational                                      August 1996

HTML拡張提案 : クライアントサイドイメージマップ

この文書のステータス

This memo provides information for the Internet community. This memo does not specify an Internet standard of any kind. Distribution of this memo is unlimited.

この文書はインターネットコミュニティへ情報を提供する。この文書ではいかなるインターネット標準も定めていない。この文書の配布は無制限である。

要約

The markup language known as "HTML/2.0" provides for image maps. Image maps are document elements which allow clicking different areas of an image to reference different network resources, as specified by Uniform Identifier (URIs). The image map capability in HTML/2.0 is limited in several ways, such as the restriction that it only works with documents served via the "HTTP" protocol, and the lack of a viable fallback for users of text-only browsers. This document specifies an extension to the HTML language, referred to as "Client- Side Image Maps," which resolves these limitations.

"HTML/2.0" として知られるマークアップ言語に対してイメージマップを提供する。イメージマップとは、イメージの異なるエリアをクリックすることで URI(Uniform Identifier)で指定された異なるネットワークリソースへの参照を提供するドキュメントエレメントである。HTML/2.0 でのイメージマップの能力はいくつか制限される。例えば "HTTP" プロトコルに対する提供しかできない、テキストブラウザのユーザに対する考慮に欠けるといった制約がある。この文書では "クライアントサイドイメージマップ" という HTML 言語の拡張を定義し、こうした制限を解決する。

目次

   1.  はじめに
       1.1  目的
       1.2  Overall Operation
   2.  クライアントサイドイメージマップ拡張 
       2.1  文法
       2.2  HTML/2.0 DTD の変更の必要
       2.3  互換性
       2.4  例
   3.  セキュリティに対する考察
   4.  参照
   5.  作者の住所

1. はじめに

1.1 目的

Image maps are an important feature of the point-and-click interface which makes the World Wide Web so popular. The most common use of image maps is to allow users to access different documents by clicking different areas in an image.

イメージマップは、WWWブラウザをポピュラーなものにするための、ポイント-クリックインターフェース機能として重要である。イメージマップの多くはユーザがイメージの異なるエリアをクリックすることで別なドキュメントへアクセスできるようにするために使われる。

There are several limitations of the current image map implementation as it applies to this use. First, it only works over the HTTP protocol, making it unusable for reading local files or files accessed via alternate protocols. Second, a server transaction is required merely to determine where the link is directed. This can degrade performance noticeably when accessing distant sites. Third, unlike for normal links, there is no way for a browser to provide visual feedback to the user showing where a portion of an image map leads before the user actually clicks it. Lastly, the method for specifying the active regions of image maps is server-dependent, compromising portability of documents. This extension to support client-side image maps addresses these issues.

現在のイメージマップの実現方法ではいくつか制限事項がある。第一に、HTTPプロトコルにしか作用せず、ローカルファイルや他の代替プロトコルに対しては働かないということである。第二に、サーバに、ダイレクトにリンクの場所を決定できる処理が要求される点である。これは遠いサイトにアクセスした時には著しくパフォーマンスが低下することになる。第三に、通常のリンクとは異なり、ブラウザがユーザが実際にクリックする前にイメージマップが指し示す場所を可視情報として示す手段がない点である。最後に、イメージの領域の指定方法がサーバ依存であり、ドキュメントのポータビリティが失われる点である。クライアントサイドイメージマップをサポートするという拡張によってこれらの問題を解決する。

It is proposed that this extension be included in a future revision of the HTML specification.

HTML 仕様書の将来のバージョンにこの拡張が含まれることを提案する。

1.2 操作の全容

Client-side image maps work by placing a complete representation of the active areas of an image, including their shape, size, and destination (URI), into an SGML-compliant textual form. This markup may also optionally include a textual description for each area for display on non-textual browsers. This representation, or "map," is given a name to identify it.

クライアントサイドイメージマップは、形、サイズと目的地(URI)を含む、アクティブなイメージ領域の完全な表現方法を SGML 準拠のフォームに置き換える働きをする。このマークアップによって、個々のエリアの情報をテキスト表示機能だけではないブラウザ上に表示することもできる。この表現方法(あるいは "map")は名前を与えられて特定される。

When an image is included in an HTML document, it may include an attribute specifying a map to use. The map may be contained in the same file which references the image, but this it not required. If the map is in a different file, a URI to that file must be provided.

HTML文書の中にイメージを含む時に、使用するマップを属性として指定する。マップはイメージと同じファイル内に存在しなければならない。が、絶対ではない。マップが異なるファイル上にある場合、そのファイルの URI を指定すればよい。

The browser will parse the map and remember the contents. When the user clicks the map, the browser will match up the location with the specified destination for that location and access that URI. In the case of a non-graphical browser, the browser could display the textual descriptions for each area instead of the image. Clicking a given textual description would then go to the associated destination.

ブラウザはマップを解析し、内容を記憶する。ユーザがマップをクリックしたとき、ブラウザはその場所に対応する指定された目的の場所やアクセスするURIを特定する。この時、非グラフィカルブラウザの場合、イメージの代わりに個々のエリアのテキスト情報を表示することができる。テキスト情報をクリックすることで目的地へたどり着くことができる。

2. クライアントサイドイメージマップ拡張

2.1 文法

Adding a USEMAP attribute to an IMG element indicates that it is a client-side image map. The USEMAP attribute can be used with the ISMAP attribute to indicate that the image can be processed as either a client-side or server-side image map. The argument to USEMAP specifies which map to use with the image, by specifying the URI for the file containing the map, followed by a '#', followed by the name of the map. If the argument to USEMAP starts with a '#', the map is assumed to be in the same document as the IMG tag. The presence of a USEMAP attribute overrides the effect of an enclosing anchor (A) element.

IMG エレメントに、対応するクライアントサイドイメージマップを示すための USEMAP 属性を追加する。USEMAP 属性を ISMAP 属性と共に使用し、クライアントサイド/サーバサイドマップのどちらとしても働くようにもできる。USEMAP の引数として、そのイメージに使用するマップを特定するため、マップを含むファイルの URI を指定する。これは '#' に、マップの名前が続く。USEMAP の引数が '#' で始まる場合、マップは IMG タグと同じドキュメント内にあるとみなされる。USEMAP 属性の存在はアンカー(A)エレメントで囲まれた時の効果よりも優先する。

The different regions of the image are described using a MAP element. The map describes each region in the image and indicates where it links to. The basic format for the MAP element is as follows:

イメージの異なる領域は MAP エレメントを用いて記述される。マップにはイメージの個々の領域と、それがどこにリンクするかが記述される。MAP エレメントの基本的な書式は以下の通りである。

   <MAP NAME="name">
   <AREA [SHAPE="shape"] COORDS="x,y,..." [HREF="reference"]
         [NOHREF] [ALT="alt"]>
   </MAP>

The NAME attribute specifies the name of the map so that it can be referenced by an IMG element. Each AREA element contained inside the map element specifies a single clickable area of the image. The SHAPE attribute gives the shape of this area. Possible shapes are "RECT", "CIRCLE", and "POLYGON", which specify rectangular, circular, and polygonal regions respectively. If the SHAPE tag is omitted, SHAPE="RECT" is assumed.

NAME 属性は IMG エレメントが参照できるようにマップの名前を特定する。個々の AREA エレメントは MAP エレメント内の個々のクリッカブル領域を記述する。SHAPE 属性はその領域の形を与える。可能な形は "RECT", "CIRCLE" と "POLYGON" であり、それぞれ四角形、円形、多角形を意味する。SHAPE 属性が省略されると、SHAPE="RECT" が指定されたとみなされる。

The COORDS tag describes the position of an area, using image pixels as the units with the origin at the upper-left corner of the image. For a rectangle, the coordinates are given as "left,top,right,bottom". The rectangular region defined includes the lower-right corner specified, i.e. to specify the entire area of a 100x100 image, the coordinates would be "0,0,99,99".

COORDSタグは、単位としてピクセルを用い、イメージの左上隅を原点としてエリアの位置を記述する。四角形の座標は、"左、上、右、下" として与えられる。四角形領域は右下のコーナーを含むものとして定義される。例えば、100x100 のイメージの全体を指定するときの座標は "0, 0, 99, 99" となる。

For a circular region, the coordinates are given as "center_x,center_y,radius", specifying the center and radius of the ircle. All points up to and including those at a distance of "radius" points from the center are included. For example, the coordinates "4,4,2" would specify a circle which included the coordinates (2,4) (6,4) (4,2) and (4,6).

円形の領域の座標は、"中心のX座標、中心のY座標、半径" で与えられ、円の中心と半径を指定する。円周上のポイントは全て含まれる。例えば、座標 "4, 4, 2" の領域は、(2,4) (6, 4) (4,2) と (4, 6) を含む円として指定される。

For a polygonal region, the coordinates specify successive vertices of the region in the format "x1,y1,x2,y2,...,xn,yn". If the first and last coordinates are not the same then a segment is inferred to close the polygon. The region includes the boundary lines of the polygon. For example, "20,20,30,40,10,40" would specify a triangle with vertices at (20,20) (30,40) and (10,40). No explicit limit is placed on the number of vertices, but a practical limit is imposed by the fact that HTML limits an attribute value to 1024 characters.

多角形領域は、領域の連続する頂点の座標を "x1, y1, x2, y2, ..., xn, yn" の形式で与える。最初と最後の座標が同じでない場合には、閉じた多角形であるとみなされる。領域には多角形の境界線も含まれている。例えば、"20, 20, 30, 40, 10, 40" は (20, 20) (30, 40) (10, 40) を頂点とする三角形を指定したことになる。頂点の数には明確な制限はないが、実際には、属性値は 1024 文字分という HTML の制限に依存する。

The NOHREF attribute indicates that clicks in this region should perform no action. An HREF attribute specifies where a click in that area should lead. A relative anchor specification will be expanded using the URI of the map description as a base, rather than using the URI of the document from which the map description is referenced. If a BASE tag is present in the document containing the map description, that URI will be used as the base.

NOHREF 属性はその領域をクリックした時に、何の動作も起こさないことを示す。HREF 属性はクリックされた時に導かれる場所を示す。相対パスで記述されたアンカーはマップ記述の URI 、つまり、マップの記述のあるドキュメントの URI をベースとして展開される。BASE タグがマップの記述があるドキュメントに含まれていた場合には、その URI はベースとしてそれを使う。

An arbitrary number of AREA tags may be specified. If two areas intersect, the one which appears first in the map definition takes precedence in the overlapping region. Multiple areas may share the same destination to create composite shapes. Any portion of an image which is not described by an AREA tag defaults to having no action.

AREA タグは任意の個数定義できる。もし二つの領域が重なり合っている場合、先に記述がある領域が優先される。複雑な形の領域をつくるために、同じ目的地を複数のエリアで共有することもできる。AREA タグによって領域が記述されなかったイメージ領域は何の動作も起こさない領域として認識される。

The ALT attribute specifies optional text which describes a given area. A text-only browser can display the textual contents for each area as a substitute for the image.

ALT 属性はエリアの付属的なテキスト情報を定義する。テキストオンリーのブラウザは個々の領域をイメージの代わりにこのテキスト情報を使って表示させることができる。

2.2 HTML/2.0 DTD の変更の必要性

The required changes to the HTML/2.0 DTD to support this syntax would be as follows:

以上の文法をサポートするためには HTML/2.0 DTD を以下のように変更する必要がある。

Change the IMG element definition to be:

IMG エレメントの定義を以下のように変更する:

    <!ELEMENT IMG    - O EMPTY>
    <!ATTLIST IMG
            SRC CDATA #REQUIRED
            ALT CDATA #IMPLIED
            ALIGN (top|middle|bottom) #IMPLIED
            ISMAP (ISMAP) #IMPLIED
            USEMAP %URI; #IMPLIED
            %SDAPREF; "<Fig><?SDATrans Img: #AttList>#AttVal(Alt)</Fig>"
    >

Add the following new definitions:

以下の新しい定義を追加する:

   <!ELEMENT MAP    - - +(AREA)>
    <!ATTLIST MAP
            NAME %linkName; #REQUIRED
    >
    <!ELEMENT AREA   - O EMPTY>
    <!ATTLIST AREA
            SHAPE (RECT|CIRCLE|POLYGON) RECT #IMPLIED
            COORDS CDATA #REQUIRED
            HREF %URI; #IMPLIED
            NOHREF (NOHREF) #IMPLIED
            ALT CDATA #IMPLIED
    >

2.3 互換性

This extension is specifically designed to provide a variety of fallback options for browsers which do not support it. These options are based on the assumption that browsers will ignore any attributes or elements which are not present in the HTML/2.0 DTD.

この拡張は、これをサポートしないブラウザのための様々な代替手段を提供するよう設計されている。これらの手段は HTML/2.0 DTD で定義されていないあらゆる属性やエレメントをブラウザが無視するだろうという過程のもとに成り立っている。

An document can be written so that a client-side image map can have three different fallback behaviors. First, the document can use the server-side image map capability, by specifying the ISMAP attribute as well as USEMAP. In situations where this is possible, the image map will work whether or not the browser supports the client-side extension.

ドキュメントを書く場合にクライアントサイドイメージマップの代替手段として 3 つの手段をとることができる。第一に、USEMAP とともに ISMAP 属性を持たせることでサーバサイドイメージマップとしても使えるようにすることである。この場合、イメージマップはブラウザがクライアントサイド拡張をサポートしているかどうかに関わらず、うまく働く。

Second, clicking the image can direct the user to a single URI, regardless of where on the image he clicks. This is accomplished by placing the image inside an anchor (A) element. The fallback destination could provide the user with an error or a textual list of destinations.

第二に、クリックされた場所に関わらず、ひとつの URI に飛ぶようにする。これはアンカー(A)エレメントの中にイメージを配置することによって実現する。この場合、ユーザに対してエラーや目的地の一覧表示を提供することができる。

Lastly, the image can appear to not be a link at all (i.e. missing whatever visual cues a browser provides to indicate a hyperlink). This will be the result if the image element neither contains an ISMAP attribute nor is inside an anchor.

最後に、イメージをリンクとして使わない(つまり、ハイパーリンクを示すためにビジュアルなきっかけを用いることをやめてしまう)という手段である。結果としてイメージは、ISMAP属性も持たなければ、アンカーの中にも存在しないということになる。

2.4 例

The following three examples show markup demonstrating the three fallback mechanisms described in section 2.3:

以下では、2.3節で述べた 3 つの代替手段のマークアップ例を示す。

This image map will work with any graphical browser:

これはどんなグラフィカルなブラウザでもうまく働くイメージマップを示す:

      <A HREF="/cgi-bin/imagemap/pic1">
      <IMG SRC="pic1.jpg" USEMAP="maps.html#map1" ISMAP></A>

Clicking here will take you to a page with an error message if you don't have client-side image map support:

クライアントサイドイメージマップをサポートしていない場合にはエラーメッセージを表示するページに飛ぶという例を示す:

      <A HREF="no_csim.html">
      <IMG SRC="pic2.jpg" USEMAP="maps.html#map2"></A>

You can only click here if your browser supports client-side

クライアントサイドイメージマップをサポートするブラウザだけで有効な例を示す:

      <IMG SRC="pic3.jpg" USEMAP="maps.html#map3">

The following example shows the use of a map in the same file as the image:

以下の例は同じファイル内に存在するマップを使った例である:

      <IMG SRC="picture.jpg" USEMAP="#mymap">

The following example defines a simple map which describes an image with a circle in the middle overlapping two large rectangles:

重なりあった二つの大きな四角形の中央に円があるイメージマップの定義の例を示す:

      <MAP NAME="welcomemap">
      <AREA SHAPE=CIRCLE COORDS="50,50,40" HREF="about_us.html"
            ALT="About our company">
      <AREA SHAPE=RECT COORDS="0,0,100,50" HREF="products.html"
            ALT="Our products">
      <AREA SHAPE=RECT COORDS="0,51,100,100 HREF="technology.html"
            ALT="Technology for the next century">
      </MAP>

3. セキュリティに対する考察

Clicking a portion of a client-side image map may cause a URI to be dereferenced. In this case, the security considerations related to URLs [5] apply.

クライアントサイドイメージマップをクリックすることは、参照している URI を導くことである。この場合、セキュリティに対する考察は URL[5] と関係する。

4. 参照

[1] Berners-Lee, T., and D. Connolly, "HyperText Markup Language
    Specification - 2.0", RFC 1866, November 1995.
[2] Seidman, J., "An HTML Extension to Support Client-Side Image
    Maps", The Second Internation WWW Conference '94 Advance
    Proceedings, pp 927-930.
[3] "Standard Generalized Markup Language"  ISO Standard 8879:1986
    Information Processing Text and Office Systems.
[4] Berners-Lee, T., Fielding, R., and H. Frystyk Nielsen,
    "Hypertext Transfer Protocol -- HTTP/1.0", Work in
    Progress.
[5] Berners-Lee, T., Masinter, L., and M. McCahill, "Uniform
    Resource Locators (URL)", RFC 1738, December 1994.

5. 作者の住所

James L. Seidman
Senior Software Engineer
Spyglass, Inc.
1230 East Diehl Road
Naperville, IL 60563

EMail: jim@spyglass.com