Imagemap"

From Documentation
m ((via JWB))
 
(14 intermediate revisions by 6 users not shown)
Line 6: Line 6:
 
*Java API: <javadoc>org.zkoss.zul.Imagemap</javadoc>
 
*Java API: <javadoc>org.zkoss.zul.Imagemap</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zul.wgt.Imagemap</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zul.wgt.Imagemap</javadoc>
 +
*Style Guide: N/A
  
 
= Employment/Purpose =
 
= Employment/Purpose =
  
−
A <tt>imagemap</tt> component is a special image. It accepts whatever properties an <tt>image </tt>component accepts. However, unlike <tt>image</tt>, if a user clicks on the image, an <tt>onClick</tt> event is sent back to the server with the coordinates of the mouse position. In contrast, the <tt>onClick </tt>event sent by <tt>image</tt> doesn't contain the coordinates.
+
A <code>imagemap</code> component is a special image. It accepts whatever properties an <code>image</code>component accepts. However, unlike <code>image</code>, if a user clicks on the image, an <code>onClick</code> event is sent back to the server with the coordinates of the mouse position. In contrast, the <code>onClick </code>event sent by <code>image</code> 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 <tt>org.zkoss.zk.ui.event .MouseEvent</tt>. Once the application receives the <tt>onClick</tt> event, it could examine the coordinates of the mouse position from the <tt>getX</tt> and <tt>getY</tt> methods.
+
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 <code>org.zkoss.zk.ui.event .MouseEvent</code>. Once a controller receives the <code>onClick</code> event, it can get the coordinates of the mouse position by <code>getX()</code> and <code>getY()</code>.
  
−
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.
+
 
 +
Note: Don't try to use CSS background as your image, the image map need a real image or it won't work.
  
 
= Example =
 
= Example =
  
 +
<source lang="xml" >
 +
<imagemap src="/img/sun.jpg" onClick="alert(event.x + &quot;, &quot; +event.y)"/>
 +
</source>
  
 +
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.
  
 +
[[Image:ZKComRef_Imagemap.png]]
  
 +
=Supported Events=
  
−
=Supported events=
+
{| class='wikitable' | width="100%"
−
 
 
−
{| border="1" | width="100%"
 
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Event Type</center>
 
! <center>Event Type</center>
Line 30: Line 36:
 
| None
 
| None
 
|}
 
|}
 +
*Inherited Supported Events: [[ZK_Component_Reference/Essential_Components/Image#Supported_Events | Image]]
  
 
=Supported Children=
 
=Supported Children=
  
−
  *NONE
+
  *[[ZK_Component_Reference/Essential_Components/Imagemap/Area | Area]]
  
−
=Use cases=
+
=Use Cases=
  
−
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Description !! Example Location
 
! Version !! Description !! Example Location
 
|-
 
|-
−
| &nbsp;
+
| 3.6
−
| &nbsp;
+
| How to get area clicked from Imagemap onClick Event
−
| &nbsp;
+
| [http://www.zkoss.org/forum/listComment/1336 http://www.zkoss.org/forum/listComment/1336]
 +
|-
 +
| 3.6
 +
| Imagemap with hyperlink
 +
| [http://www.zkoss.org/forum/listComment/3016 http://www.zkoss.org/forum/listComment/3016]
 
|}
 
|}
  
 
=Version History=
 
=Version History=
−
 
+
{{LastUpdated}}
−
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-
−
| 5.0.2
+
| &nbsp;
−
| 5/19/2010
+
| &nbsp;
−
| Initialization
+
| &nbsp;
 
|}
 
|}
  
 
{{ZKComponentReferencePageFooter}}
 
{{ZKComponentReferencePageFooter}}

Latest revision as of 10:40, 12 January 2022


DocumentationZK Component ReferenceEssential ComponentsImagemap
Imagemap

Imagemap

Employment/Purpose

A imagemap component is a special image. It accepts whatever properties an imagecomponent 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 a controller receives the onClick event, it can get the coordinates of the mouse position by getX() and getY().


Note: Don't try to use CSS background as your image, the image map need a real image or it won't work.

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
None None
  • Inherited Supported Events: Image

Supported Children

* Area

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

Last Update : 2022/01/12


Version Date Content
     



Last Update : 2022/01/12

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


Retrieved from "https://www.zkoss.org/_w/index.php?title=ZK_Component_Reference/Essential_Components/Imagemap&oldid=52692"