Java Reference
In-Depth Information
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"
targetImage="mapImage" />
...
<bookstore:area id="map6" value="#{Book207}"
onmouseover="resources/images/book_207.jpg"
onmouseout="resources/images//book_all.jpg"
targetImage="mapImage" />
</bookstore:map>
The standard
h:graphicImage
tag associates an image (
book_all.jpg
) with an
image map that is referenced in the
usemap
attribute value.
The custom
bookstore:map
tag that represents the custom component,
MapCompon-
ent
, specifies the image map, and contains a set of
area
tags. Each custom
book-
store:area
tag represents a custom
AreaComponent
and specifies a region of the
image map.
On the page, the
onmouseover
and
onmouseout
attributes specify the image that is
displayed when the user performs the actions described by the attributes. The custom ren-
derer also renders an
onclick
attribute.
In the rendered HTML page, the
onmouseover
,
onmouseout
, and
onclick
attrib-
utes 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. When the user clicks a
region, the
onclick
function sets the value of a hidden
input
tag to the ID of the se-
lected area and submits the page.
When the custom renderer renders these attributes in HTML, it also renders the JavaScript
code. The custom renderer also renders the entire
onclick
attribute rather than let the
page author set it.
The custom renderer that renders the HTML
map
tag also renders a hidden
input
com-
ponent that holds the current area. The server-side objects retrieve the value of the hidden
input
field and set the locale in the
FacesContext
instance according to which re-
gion was selected.
