<?xml version="1.0" encoding="utf-8"?>
<article xmlns="http://docbook.org/ns/docbook" version="5.0">
<title>Unit test: calloutlist.004</title>

<para>This image map uses <literal>calspair</literal> coordinates. The
CALS pair coordinate system measures rectangles from the lower-left
coordinate to the upper-right coordinate as a percentage of the size
of the image. Each coordiante is multiplied by 10,000 to make an
integer. For example, a coordinate of 20.25% is represented as
2025. If your image is a square, the upper right quadrant of
that square can be identfied with the CALS pair coordinates
<literal>5000,5000,10000,10000</literal>.</para>

<para>The HTML coordinate system measures rectangles from the upper-left
coordinate to the lower-right coordinate in pixels. If the square
has a side-length of 200 pixels, the coordinates that correspond to the
upper right are <literal>50,0,100,50</literal>.</para>

<figure>
    <title>A rectangle's corners</title>

    <mediaobject>
      <imageobjectco>
        <areaspec otherunits="imagemap" units="other">
          <area coords="1400,6150,3850,8500" linkends="coLeftUpper" units="calspair" xml:id="lu">
            <alt>Left upper corner</alt>
          </area>
          <area coords="6650,1750,8250,3300" linkends="coRightLower"  units="calspair" xml:id="rl">
            <alt>Right lower corner</alt>
          </area>
        </areaspec>
        <imageobject>
          <imagedata contentwidth="200" contentdepth="200"
                     fileref="../media/box.svg"/>
        </imageobject>
        <calloutlist>
          <callout arearefs="lu" xml:id="coLeftUpper">
            <para>Left upper corner</para>
          </callout>
          <callout arearefs="rl" xml:id="coRightLower">
            <para>Right lower corner</para>
          </callout>
        </calloutlist>
      </imageobjectco>
    </mediaobject>
  </figure>

</article>
