Image maps

> > > > >

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.

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

See IlvSDMImageMapAreaGenerator and the associated sample Diagram Gallery for details of how to implement an image map object in JViews Diagrammer.

See IlvImageMapAreaGenerator and the associated sample Using a Manager View for details of how to implement an image map object at the JViews Framework level.

JViews Diagrammer

Adding and displaying an image map

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

<jvdf:diagrammerView [..] generateImageMap="true"
imageMapGenerator="#{diagrammerBean.imapGenerator}"
imageMapVisible="true"/>

Showing or hiding an image map

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

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

At the JViews Framework level

Adding and displaying an image map

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

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

Showing or hiding an image map

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" />

Hiding an image map for use with interactors

The image map must be hidden to use interactors. The following code sample shows how 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" />

Note

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.

Current section

The JViews Maps JSF component set