Understanding the JSP Page
Understanding the JSP Page
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.
Understanding the JSP Page
Here is an abbreviated form of the JSP page that the image map component will use to generate
the HTML page shown in the preceding section:
<f:view>
<f:loadBundle basename=
"messages.BookstoreMessages"
var=
"bundle"/>
<h:form>
...
<h:graphicImage id=
"mapImage" url="/template/world.jpg"
Understanding the Image Map Example
The Java EE 5 Tutorial · September 2007
414
