Java Reference
In-Depth Information
mediate feedback when a user positions the mouse over a hotspot. Another reason is that
client-side image maps perform better because they don't require round-trips to the server.
However, in some situations, your image map might need to access the server to retrieve
data or to change the appearance of non-form controls, tasks that a client-side image map
cannot do.
Because the image map custom component uses JavaServer Faces technology, it has the
best of both styles of image maps: It can handle the parts of the application that need to be
performed on the server, while allowing the other parts of the application to be performed
on the client side.
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="j_idt13" name="j_idt13" method="post"
action="/dukesbookstore/faces/index.xhtml" ... >
...
<img id="j_idt13:mapImage"
src="/dukesbookstore/faces/javax.faces.resource/
book_all.jpg?ln=images"
alt="Choose a Book from our Catalog"
usemap="#bookMap" />
...
<map name="bookMap">
<area alt="Duke"
coords="67,23,212,268"
shape="rect"
onmouseout=
"document.forms[0]['j_idt13:mapImage'].src='resources/images/
book_all.jpg'"
onmouseover=
"document.forms[0]['j_idt13:mapImage'].src='resources/images/
book_201.jpg'"
onclick=
"document.forms[0]['bookMap_current'].value='Duke'; docu-
ment.forms[0].submit()"
/>
...
<input type="hidden" name="bookMap_current">
</map>
...
</form>
