Understanding the Rendered HTML

Here is an abbreviated version of the form part of the HTML page that the application needs to render:

<form id="_id38" method="post"
     action="/bookstore6/chooselocale.faces" ... >
    ...
    <img id="_id38:mapImage"
         src="/bookstore6/template/world.jpg"
         alt="Choose Your Preferred Locale from the Map"
         usemap="#worldMap" />
         <map name="worldMap">
            <area alt="NAmerica"                        
                 coords="53,109,1,110,2,167,,..."
                shape="poly"
                 onmouseout=
                    "document.forms[0][’_id_id38:mapImage’].src=
                        ’/bookstore6/template/world.jpg’"
                onmouseover=
                    "document.forms[0][’_id_id38:mapImage’].src=
                        ’/bookstore6/template/world_namer.jpg’"
                onclick=
                    "document.forms[0][’worldMap_current’].
                        value=
                            ’NAmerica’;document.forms[0].submit()"
            />
            <input type="hidden" name="worldMap_current">
        </map>
        ...
</form>

The img tag associates an image (world.jpg) with the image map referenced in the usemap attribute value.

The map tag specifies the image map and contains a set of area tags.

Each area tag specifies a region of the image map. The onmouseover, onmouseout, and onclick attributes define which JavaScript code is executed when these events occur. When the user moves the mouse over a region, the onmouseover function associated with the region displays the map with that region highlighted. When the user moves the mouse out of a region, the onmouseout function redisplays the original image. If the user clicks on a region, the onclick function sets the value of the input tag to the ID of the selected area and submits the page.

The input tag represents a hidden control that stores the value of the currently selected area between client-server exchanges so that the server-side component classes can retrieve the value.

The server-side objects retrieve the value of worldMap_current and set the locale in the FacesContext instance according to the region that was selected.