Java Reference
In-Depth Information
The
img
tag associates an image (
book_all.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 oc-
cur. When the user moves the mouse over a region, the
onmouseover
function associ-
ated with the region displays the map with that region highlighted. When the user moves
the mouse out of a region, the
onmouseout
function re-displays 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 re-
trieve the value.
The server-side objects retrieve the value of
bookMap_current
and set the locale in
the
javax.faces.context.FacesContext
instance according to the region that
was selected.
Understanding the Facelets Page
Here is an abbreviated form of the Facelets page that the image map component uses
to generate the HTML page shown in the preceding section. It uses custom
book-
store:map
and
bookstore:area
tags to represent the custom components:
<h:form>
...
<h:graphicImage id="mapImage"
name="book_all.jpg"
library="images"
alt="#{bundle.ChooseBook}"
usemap="#bookMap" />
<bookstore:map id="bookMap"
current="map1"
immediate="true"
action="bookstore">
<f:actionListener
type="dukesbookstore.listeners.MapBookChangeListener" />
<bookstore:area id="map1" value="#{Book201}"
onmouseover="resources/images/book_201.jpg"
onmouseout="resources/images/book_all.jpg"
