Adding Graphics and Images with the graphicImage Tag

In a JavaServer Faces application, the UIGraphic component represents an image. The graphicImage tag is used to render a UIGraphic component on a page. The Duke’s Bookstore application uses a graphicImage tag to display the map image on the chooselocale.jsp page:

<h:graphicImage id="mapImage" url="/template/world.jpg"
     alt="#{bundle.chooseLocale}" usemap="#worldMap" />

The url attribute specifies the path to the image. It also corresponds to the local value of the UIGraphic component so that the URL can be retrieved, possibly from a backing bean. The URL of the example tag begins with a /, which adds the relative context path of the web application to the beginning of the path to the image.

The title attribute specifies the alternative text displayed when the user mouses over the image. In this example, the title attribute refers to a localized message. See Performing Localization for details on how to localize your JavaServer Faces application.

The usemap attribute refers to the image map defined by the custom component, MapComponent, which is on the same page. See Chapter 13, Creating Custom UI Components for more information on the image map.