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.
<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"
|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.
- Inherited Supported Events: AbstractComponent
|5.0.2||Area in Imagemap with href||http://www.zkoss.org/forum/listComment/3016|