Adding an Image Map

Advanced Features > Using DHTML-Based JSF Components to Build Web Applications > The JViews Framework Faces Component Set > Adding an Image Map

Adding an Image Map

INDEX

PREVIOUS NEXT

The image map allows you to have images on the client-side with an attached map that points out certain hot spots or clickable areas. A typical use case for image maps is for displaying tooltips.

To add an image map and to display it, use the following code:

<jvf:view [..] generateImageMap="true"
imageMapGenerator="#{frameworkBean.imapGenerator}"
imageMapVisible="true"/>

Code Sample 6.8 Adding and Displaying an Image Map

The role of the image map generator is to configure the attributes and JavaScript handlers for each zone of the image map.

See IlvImageMapAreaGeneratorand the associated sample Using a Manager View for details of how to implement an image map object.

You can use the JavaScript representation of the view to show or hide the image map.

<jvf:view [..] id="view" />
<jv:imageButton id="bImgMap"
                                                                                    [...]
                        onclick="view.setImageMapVisible(bImgMap.isSelected())"
                   toggle="true"
                   message="Show/Hide Tooltips" />

Code Sample 6.9 Showing or Hiding an Image Map

Code Sample 6.10 shows the use with interactors to hide the image map when another button in the same button group is clicked.

<jv:imageButton id="bZoom"
                                                                                     [...]
                          onclick="view.setInteractor(zoomInteractor)"
                     buttonGroupId="interactors"
                     message="Zoom" />
<jv:imageButton id="bImgMap"
                                                                                     [...]
                        onclick="view.setImageMapVisible(bImgMap.isSelected())"
                   buttonGroupId="interactors"
                   doActionOnBGDeselect="true"
                   message="Show/Hide Tooltips" />

Code Sample 6.10 Hiding the Image Map, Used with Interactors

Notes

When the image map is displayed, the current interactor is disabled. To use interactors, the image map must be hidden.

See JavaScript Objects for more details on the client-side representation of JSF-compatible components.

PREVIOUS NEXT