title: How to determine coordinates of different areas in h:graphicImage
body: <p>I am writing a JSF app that's similar to the dukes-bookstore case study in the Java EE tutorial. In the dukes-bookstore example the h:graphicImage consists of 6 areas, each displaying a book in the index.xhtml page. The coordinates for each area are hardcoded in the Application Configuration Resource file faces-config.xml. The following snippet shows the declaration of the managed bean elements that capture the coordinates, shapes, and alt text for each area of the h:graphicImage.</p>
  <pre><code>&lt;managed-bean eager=&quot;true&quot;&gt;
          &lt;description&gt;
              Causes the default VariableResolver implementation to instantiate the 
              managed bean Book201 of the class components.model.ImageArea in application 
              scope if the bean does not already exist in any scope, and initialize the
              shape, alt, and coords properties with the values specified by the
              managed-property elements.
          &lt;/description&gt;
          &lt;managed-bean-name&gt;Book201&lt;/managed-bean-name&gt;
          &lt;managed-bean-class&gt;javaeetutorial.dukesbookstore.model.ImageArea&lt;/managed-bean-class&gt;
          &lt;managed-bean-scope&gt;application&lt;/managed-bean-scope&gt;
          &lt;managed-property&gt;
              &lt;description&gt;
                  Initializes the shape property of the managed bean Book201 with the value 
                  rect.
              &lt;/description&gt;
              &lt;property-name&gt;shape&lt;/property-name&gt;
              &lt;value&gt;rect&lt;/value&gt;
          &lt;/managed-property&gt;
          &lt;managed-property&gt;
              &lt;description&gt;
                  Initializes the alt property of the managed bean Book201 with the value 
                  Duke.
              &lt;/description&gt;
              &lt;property-name&gt;alt&lt;/property-name&gt;
              &lt;value&gt;Duke&lt;/value&gt;
          &lt;/managed-property&gt;
          &lt;managed-property&gt;
              &lt;description&gt;
                  Initializes the coords property of the managed bean Book201 with the value 
                  specified by the value element. 
              &lt;/description&gt;
              &lt;property-name&gt;coords&lt;/property-name&gt;
              &lt;value&gt;67,23,212,268&lt;/value&gt;
          &lt;/managed-property&gt;
      &lt;/managed-bean&gt;
  ...........................
  ...........................
  </code></pre>
  <p>The tutorial does not explain how the coordinates (67,23, 212,268) are calculated, so I am wondering how I can determine such coordinates for my application (h:graphicImage in my app consists of several auto-parts)?</p>
  <p>
  Thanks
  </p>