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><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></pre> +++ +++ <h2>Binding</h2> +++ +++ <pre><fb:value id="map" path="@src"/></pre> +++ +++ <h2>Template</h2> +++ +++ <p><ft:widget id="map"><br/> +++ <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"/><br/> +++ </ft:widget></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
