How to determine coordinates of different areas in h:graphicImage

Question

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.

<managed-bean eager="true">
        <description>
            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.
        </description>
        <managed-bean-name>Book201</managed-bean-name>
        <managed-bean-class>javaeetutorial.dukesbookstore.model.ImageArea</managed-bean-class>
        <managed-bean-scope>application</managed-bean-scope>
        <managed-property>
            <description>
                Initializes the shape property of the managed bean Book201 with the value 
                rect.
            </description>
            <property-name>shape</property-name>
            <value>rect</value>
        </managed-property>
        <managed-property>
            <description>
                Initializes the alt property of the managed bean Book201 with the value 
                Duke.
            </description>
            <property-name>alt</property-name>
            <value>Duke</value>
        </managed-property>
        <managed-property>
            <description>
                Initializes the coords property of the managed bean Book201 with the value 
                specified by the value element. 
            </description>
            <property-name>coords</property-name>
            <value>67,23,212,268</value>
        </managed-property>
    </managed-bean>
...........................
...........................

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)?

Thanks