Forms
- Basics
- Widgets
  - Action widget
  - Aggregatefield widget
  - Booleanfield widget
  - Calculated fields
  - Captcha Widget
  - Class/New (not really widgets)
  - Field widget
  - Form
  - Group/Struct widget
  - ImageMap widget
  - Messages widget
  - MultiValueField widget
  - Output widget
  - RepeaterAction widget
  - Repeater widget
  - RowAction widget
  - Submit widget
  - Tree widget
  - Union widget
  - Upload widget
- Widget concepts
- Form publishing
- Binding
- API
- Form libraries
- Ajax
Migration guide
- Migration guide
Sitemap Components
Project Documentation
- Project Information
- Project Reports

ImageMap widget

Concept

It is used to display a server-side image map and it triggers an ImageMap event on the server side when clicked.

It behaves much as an Action widget, but you can bind the source URI of the image using the binding framework "fb:value" element, set the image at runtime using the setImageURI() method, and retrieve the mouse coordinates with getX() and getY() methods.

Definition

<fd:imagemap id="map">
    <fd:imageuri>test.gif</fd:imageuri>
    <fd:hint>Click on this map to zoom-in</fd:hint>
    <fd:on-action>
        <javascript>onClickMap(event);</javascript>
    </fd:on-action>
</fd:imagemap>

Binding

<fb:value id="map" path="@src"/>

Template

<ft:widget id="map">
	<fi:styling xmlns:fi="http://apache.org/cocoon/forms/1.0#instance"
		border="2"/>
</ft:widget>

Flow

This is another way to set the image URI:

frm.getWidget().lookupWidget("map").setImageURI("test2.gif");

This is the handler of the imagemap event:

function onClickMap (event) {
	var x= event.getX();
	var y= event.getY();

	cocoon.log.debug("imageMap: x:" + x + " y:" + y);
}