The Java EE 5 Tutorial

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"
         alt="Choose Your Preferred Locale from the Map"
         usemap="#worldMap" />
         <map name="worldMap">
            <area alt="NAmerica"                        
            <input type="hidden" name="worldMap_current">

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.