Area"
Tmillsclare (talk | contribs) m (→Example) |
m ((via JWB)) |
||
| (7 intermediate revisions by 4 users not shown) | |||
| Line 6: | Line 6: | ||
*Java API: <javadoc>org.zkoss.zul.Area</javadoc> | *Java API: <javadoc>org.zkoss.zul.Area</javadoc> | ||
*JavaScript API: <javadoc directory="jsdoc">zul.wgt.Area</javadoc> | *JavaScript API: <javadoc directory="jsdoc">zul.wgt.Area</javadoc> | ||
| + | *Style Guide: N/A | ||
= Employment/Purpose = | = Employment/Purpose = | ||
| − | An area of a image map | + | An area of a image map. Instead of the application processing the coordinates, developers can add the area components as children of a imagemap component thus defining a target. The imagemap component will translate the mouse pointer coordinates into a logical name ie. The id of the area the user clicked. |
| + | = Example = | ||
| + | |||
| + | <source lang="xml" > | ||
| + | <imagemap src="/img/sun.jpg" onClick="alert(event.area)"> | ||
| + | <area id="First" coords="0, 0, 100, 100"/> | ||
| + | <area id="Second" shape="circle" coords="200, 200, 100"/> | ||
| + | </imagemap> | ||
| + | </source> | ||
| + | |||
| + | = The shape Property = | ||
| + | An area component supports three kinds of shapes: circle, polygon and rectangle. The coordinates of the mouse position are screen pixels counted from the upper-left corner of the image beginning with (0, 0). | ||
| + | |||
| + | |||
| + | {| class='wikitable' | width="100%" | ||
| + | ! <center>Shape</center> | ||
| + | ! <center>Coordinates / Description</center> | ||
| + | |||
| + | |- | ||
| + | | circle | ||
| + | | coords="x, y, r" | ||
| + | |||
| + | where <code>x</code> and <code>y</code> define the position of the circle’s center and <code>r</code> is the radius in pixels. | ||
| + | |||
| + | |- | ||
| + | | polygon | ||
| + | | coords="x1, y1, x2, y2, x3, y3..." | ||
| + | |||
| + | where each pair of <code>x</code> and <code>y</code> define a point of the polygon. At least three pairs of coordinates are required to define a triangle. The polygon is automatically closed, so it is not necessary to repeat the first coordinate at the end of the list to close the region. | ||
| + | |- | ||
| + | | rectangle | ||
| + | | coords="x1, y1, x2, y2" | ||
| − | + | where the first coordinate pair is one corner of the rectangle and the other pair is the corner diagonally opposite. A rectangle is just a shortened way of specifying a polygon with four vertices. | |
| − | + | |} | |
| + | If the coordinates in one <code>area</code> component overlap with another, the first one takes precedence. | ||
| − | =Supported | + | =Supported Events= |
| − | {| | + | {| class='wikitable' | width="100%" |
! <center>Name</center> | ! <center>Name</center> | ||
! <center>Event Type</center> | ! <center>Event Type</center> | ||
| Line 25: | Line 58: | ||
| None | | None | ||
|} | |} | ||
| + | *Inherited Supported Events: [[ZK_Component_Reference/Base_Components/AbstractComponent#Supported_Events | AbstractComponent]] | ||
=Supported Children= | =Supported Children= | ||
| − | * | + | *None |
| − | =Use | + | =Use Cases= |
| − | {| | + | {| class='wikitable' | width="100%" |
! Version !! Description !! Example Location | ! Version !! Description !! Example Location | ||
|- | |- | ||
| Line 41: | Line 75: | ||
=Version History= | =Version History= | ||
| − | + | {{LastUpdated}} | |
| − | {| | + | {| class='wikitable' | width="100%" |
! Version !! Date !! Content | ! Version !! Date !! Content | ||
|- | |- | ||
| − | | | + | | |
| − | | | + | | |
| − | | | + | | |
|} | |} | ||
{{ZKComponentReferencePageFooter}} | {{ZKComponentReferencePageFooter}} | ||
Latest revision as of 10:40, 12 January 2022
Area
Employment/Purpose
An area of a image map. Instead of the application processing the coordinates, developers can add the area components as children of a imagemap component thus defining a target. The imagemap component will translate the mouse pointer coordinates into a logical name ie. The id of the area the user clicked.
Example
<imagemap src="/img/sun.jpg" onClick="alert(event.area)">
<area id="First" coords="0, 0, 100, 100"/>
<area id="Second" shape="circle" coords="200, 200, 100"/>
</imagemap>
The shape Property
An area component supports three kinds of shapes: circle, polygon and rectangle. The coordinates of the mouse position are screen pixels counted from the upper-left corner of the image beginning with (0, 0).
| circle | coords="x, y, r"
where |
| polygon | coords="x1, y1, x2, y2, x3, y3..."
where each pair of |
| rectangle | coords="x1, y1, x2, y2"
where the first coordinate pair is one corner of the rectangle and the other pair is the corner diagonally opposite. A rectangle is just a shortened way of specifying a polygon with four vertices. |
If the coordinates in one area component overlap with another, the first one takes precedence.
Supported Events
| None | None |
- Inherited Supported Events: AbstractComponent
Supported Children
*None
Use Cases
| Version | Description | Example Location |
|---|---|---|
| 5.0.2 | Area in Imagemap with href | http://www.zkoss.org/forum/listComment/3016 |
Version History
| Version | Date | Content |
|---|---|---|