Apache » Cocoon »

  Cocoon Forms
      1.0
   homepage

Cocoon Forms 1.0

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);
}
Errors and Improvements? If you see any errors or potential improvements in this document please help us: View, Edit or comment on the latest development version (registration required).