[DAISY] Updated: ImageMap widget

Fri, 16 Dec 2005 02:31:37 -0800 

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:26:02 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: 1494 bytes (previous version: 1595 bytes)
Content diff:
    <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>
+++ image using the binding framework "<tt>fb:value</tt>" element, set the 
image at
+++ runtime using the <tt>setImageURI()</tt> method, and retrieve the mouse
+++ coordinates with <tt>getX(</tt>) and <tt>getY()</tt> 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: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>
(2 equal lines skipped)
    
    <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>
+++ <pre>&lt;ft:widget id="map"&gt;
+++     &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;
+++ &lt;/ft:widget&gt;</pre>
    
    <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:</p>
+++ 
    <pre>
--- frm.getWidget().lookupWidget("map").setImageURI("test2.gif");</pre>
+++ function onClickMap (event) {
+++     var x= event.getX();
+++     var y= event.getY();
+++     var uri;
    
--- <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>
+++     uri= map.zoomIn(new Rectangle(new Point(x, y), 1,1));
+++     if ( uri != "map.zoominTooFar" ) {
+++             event.getSource().setImageURI(uri);
+++     }
+++ }
+++ </pre>
    
--- <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