You are viewing a plain text version of this content. The canonical link for it is here.
Posted to docs@cocoon.apache.org by da...@cocoon.zones.apache.org on 2005/12/16 11:22:36 UTC
[DAISY] Updated: ImageMap widget

A document has been updated:

http://cocoon.zones.apache.org/daisy/documentation/738.html

Document ID: 738
Branch: main
Language: default
Name: ImageMap widget (unchanged)
Document Type: Cocoon Document (unchanged)
Updated on: 12/16/05 10:22:25 AM
Updated by: Luca Morandini

A new version has been created, state: draft

Parts
=====
Content
-------
This part has been updated.
Mime type: text/xml (unchanged)
File name:  (unchanged)
Size: 1595 bytes (previous version: 37 bytes)
Content diff:
--- <html><body><p>TODO</p></body></html>
+++ <html>
+++ <body>
+++ 
+++ <h2>ImageMap widget</h2>
+++ 
+++ <h2>Concept</h2>
+++ 
+++ <p>It is used to display a server-side image map and it triggers an ImageMap
+++ event on the server side when clicked.<br/>
+++ 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.</p>
+++ 
+++ <h2>Definition</h2>
+++ 
+++ <pre>&lt;fd:imagemap id="map"&gt;
+++     &lt;fd:imageuri&gt;test.gif&lt;/fd:imageuri&gt;
+++     &lt;fd:hint&gt;Click on this map to zoom-in&lt;/fd:hint&gt;
+++     &lt;fd:on-action&gt;
+++         &lt;javascript&gt;onClickMap(event);&lt;/javascript&gt;
+++     &lt;/fd:on-action&gt;
+++ &lt;/fd:imagemap&gt;</pre>
+++ 
+++ <h2>Binding</h2>
+++ 
+++ <pre>&lt;fb:value id="map" path="@src"/&gt;</pre>
+++ 
+++ <h2>Template</h2>
+++ 
+++ <p>&lt;ft:widget id="map"&gt;<br/>
+++     &lt;fi:styling
+++ xmlns:fi="<a href="http://apache.org/cocoon/forms/1.0#instance">http://apache.org/cocoon/forms/1.0#instance</a>"
+++ border="2"/&gt;<br/>
+++ &lt;/ft:widget&gt;</p>
+++ 
+++ <h2>Flow</h2>
+++ 
+++ <p>This is another way to set the image URI:</p>
+++ 
+++ <pre>
+++ frm.getWidget().lookupWidget("map").setImageURI("test2.gif");</pre>
+++ 
+++ <p>This is the handler of the imagemap event:<br/>
+++ function onClickMap (event) {<br/>
+++     var x= event.getX();<br/>
+++     var y= event.getY();<br/>
+++     var uri;</p>
+++ 
+++ <p>    uri= map.zoomIn(new Rectangle(new Point(x, y), 1, 1));<br/>
+++     if ( uri != "map.zoominTooFar" ) {<br/>
+++         event.getSource().setImageURI(uri);<br/>
+++     }<br/>
+++ }</p>
+++ 
+++ </body>
+++ </html>


Fields
======
no changes

Links
=====
no changes

Custom Fields
=============
no changes

Collections
===========
no changes