Imagemap"

From Documentation
Line 36: Line 36:
 
<tt>Use getX(), getY() method get coordinates.</tt>
 
<tt>Use getX(), getY() method get coordinates.</tt>
  
 +
|}
 +
 +
=Supported molds=
 +
Available molds of a component are defined in lang.xml embedded in zul.jar.
 +
{| border="1" | width="100%"
 +
! <center>Name</center>
 +
! <center>Snapshot</center>
 +
|-
 +
| <center>default</center>
 +
|
 +
|-
 +
| <center>alphafix</center>
 +
|
 
|}
 
|}
  

Revision as of 07:18, 2 November 2010

Imagemap

Employment/Purpose

A imagemap component is a special image. It accepts whatever properties an image component accepts. However, unlike image, if a user clicks on the image, an onClick event is sent back to the server with the coordinates of the mouse position. In contrast, the onClick event sent by image doesn't contain the coordinates.

The coordinates of the mouse position are screen pixels counted from the upper-left corner of the image beginning with (0, 0). It is stored as instance of org.zkoss.zk.ui.event .MouseEvent. Once the application receives the onClick event, it could examine the coordinates of the mouse position from the getX and getY methods.

Example

<imagemap src="/img/sun.jpg" onClick="alert(event.x + &quot;, &quot; +event.y)"/>

For example, if a user clicks 208 pixels over and 205 pixels down from the upper-left corner of the image displayed from the following statement, then the user gets the result as depicted below.

ZKComRef Imagemap.png

Supported events

Name
Event Type
onClick
MouseEvent

Description: Denotes user has clicked the component.

Use getX(), getY() method get coordinates.

Supported molds

Available molds of a component are defined in lang.xml embedded in zul.jar.

Name
Snapshot
default
alphafix

Supported Children

*NONE

Use cases

Version Description Example Location
3.6 How to get area clicked from Imagemap onClick Event http://www.zkoss.org/forum/listComment/1336
3.6 Imagemap with hyperlink http://www.zkoss.org/forum/listComment/3016

Version History

Version Date Content
     



Last Update : 2010/11/02

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.