10.12.2012 Views

The Java EE 5 Tutorial (PDF) - Oracle Software Downloads

The Java EE 5 Tutorial (PDF) - Oracle Software Downloads

The Java EE 5 Tutorial (PDF) - Oracle Software Downloads

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Understanding the Image Map Example<br />

412<br />

onmouseout=<br />

"document.forms[0][’_id_id38:mapImage’].src=<br />

’/bookstore6/template/world.jpg’"<br />

onmouseover=<br />

"document.forms[0][’_id_id38:mapImage’].src=<br />

’/bookstore6/template/world_namer.jpg’"<br />

onclick=<br />

"document.forms[0][’worldMap_current’].<br />

value=<br />

’NAmerica’;document.forms[0].submit()"<br />

/><br />

<br />

<br />

...<br />

<br />

<strong>The</strong> img tag associates an image (world.jpg) with the image map referenced in the usemap<br />

attribute value.<br />

<strong>The</strong> map tag specifies the image map and contains a set of area tags.<br />

Each area tag specifies a region of the image map. <strong>The</strong> onmouseover, onmouseout, and onclick<br />

attributes define which <strong>Java</strong>Script code is executed when these events occur. When the user<br />

moves the mouse over a region, the onmouseover function associated with the region displays<br />

the map with that region highlighted. When the user moves the mouse out of a region, the<br />

onmouseout function redisplays the original image. If the user clicks on a region, the onclick<br />

function sets the value of the input tag to the ID of the selected area and submits the page.<br />

<strong>The</strong> input tag represents a hidden control that stores the value of the currently selected area<br />

between client-server exchanges so that the server-side component classes can retrieve the<br />

value.<br />

<strong>The</strong> server-side objects retrieve the value of worldMap_current and set the locale in the<br />

FacesContext instance according to the region that was selected.<br />

Understanding the JSP Page<br />

Here is an abbreviated form of the JSP page that the image map component will use to generate<br />

the HTML page shown in the preceding section:<br />

<br />

<br />

<br />

...<br />

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!