apache > cocoon

- Home

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