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.