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).