Click 'Start selection' button to begin (load image first).

Click top-left corner of area 1. or 'done' to add whole image description.

Now click bottom-right corner ...

Click 'Get area coords' button, or click top-left again to restart for area 1.

Input title and description, 'Generate RDF', then 'Start new selection' (skip 'Generate RDF' if need to re-select area 1).

Describe whole image, and complete annotation by adding it to RDF.

Test RDF with online XSLT, or load new image.

Click 'Start new selection' to select another area.


Image part description

Image part coordinates
Whole image description Image size

The resulting RDF:

or, if really want to clear the above field

Step by step: 使い方の説明

  1. Specify the image URI to annotate. You can select a local file via file system dialog.


  2. Then click "Start selection" button to select a part of the image. Selection is done not by dragging, but by clicking top-left, and then clicking again at the bottom-right. Click "Get area coords" button when done. If you click the image without get area coords, you will re-select the area.

    画像をロードするとエリアの選択が始まります。サンプル画像を使う場合は、"Start selection"ボタンでエリアの選択を開始してください。選択は「ドラッグ」ではなく、エリアの左上をクリックし、もう一度右下をクリックします。選択が終了したら"Get area coords"ボタンで座標を取得してください。座標を取得しない状態でもう一度画像をクリックすると、エリアの再選択となります。

  3. Input the title and description of the area, then click 'Generate RDF' button. You can select another area by clicking 'Start selection' button.

    選択したエリアのタイトルと説明を入力し、'Generate RDF'をクリックしてください。もう一度'Start selection'ボタンをクリックすると、別のエリアを追加選択できます。ここで、「エリアの説明」と「エリアに描かれているものの説明」の違いに注意してください。


    エリアの説明 Area description
    Description of the area as a part of the image. For example, 'This contrabass is exhibited on a wall of a stair because it is too tall to put on the floor'.
    エリアに描かれているものの説明 Description of what is depicted
    Description of the thing that is depicted in the area. For example, 'Contrabass is the largest and lowest member of string instruments'.
  4. Once all needed areas are described, then click 'done', and describe the whole image.


Annotation examples: アノテーションの例

There are some examples of image area annotations and their XSLT/CSS presentation.


Since these annotations are RDF/XML metadata, different presentaition is also possible with another stylesheet. The following is rendering example with special XSLT for voice browser (in Japanese).


Another example of different presentation. This time annotations are presented via XHTML image map.



Property 'image:depicts'

In this trial annotator, a property 'image:depicts' is used to describe what the region depicts. Although it is important to distinguish between the description of the region itself and that of what the region depicts, the property for that purpose is not defined. 'image:depicts' is one candidate from Jim Ley's vocabulary. Another possibility is 'foaf:regionDepicts', which is not yet defined, too.


Shape of ther area

In this trial annotator, the shape of the area is limited to 'Rectangle' in order to make it easy to use CSS. Jim Leys vocabulary also defines another shapes such as Circle, Polygon etc.

ここでは、CSSによるプレゼンテーションを容易にするために、エリアの形はRectangleのみを用いていますが、Jim Leyの語彙ではCircle, Polygonなど他のクラスも定義されており、もちろんこれらを用いた注釈も可能です。

For further discussion, see Note: Image description 2004 in this site.