Imagemap"
Maya001122 (talk | contribs) m |
m (correct highlight (via JWB)) |
||
| Line 3: | Line 3: | ||
__TOC__ | __TOC__ | ||
| − | A < | + | 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. 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 starting from (0, 0). The information is stored as instance of <javadoc>org.zkoss.zk.ui.event.MouseEvent</javadoc>. Once the application receives the < | + | The coordinates of the mouse position are screen pixels counted from the upper-left corner of the image starting from (0, 0). The information is stored as instance of <javadoc>org.zkoss.zk.ui.event.MouseEvent</javadoc>. Once the application receives the <code>onClick</code> event, it can examine the mouse position co-ordinates from the <code>getX</code> and <code>getY</code> methods. |
The example below, will display the co-ordinates that the user clicked. | The example below, will display the co-ordinates that the user clicked. | ||
| Line 18: | Line 18: | ||
=== Area === | === Area === | ||
| − | Instead of the application processing the coordinates, developers can add the < | + | Instead of the application processing the coordinates, developers can add the <code>area</code> components as children of a <code>imagemap</code> component thus defining a target. |
<source lang="xml" > | <source lang="xml" > | ||
| Line 41: | Line 41: | ||
| coords="x, y, r" | | coords="x, y, r" | ||
| − | where < | + | 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. |
|- | |- | ||
| Line 47: | Line 47: | ||
| coords="x1, y1, x2, y2, x3, y3..." | | coords="x1, y1, x2, y2, x3, y3..." | ||
| − | where each pair of < | + | 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. |
|- | |- | ||
| Line 56: | Line 56: | ||
|} | |} | ||
| − | If the coordinates in one < | + | If the coordinates in one <code>area</code> component overlap with another, the first one takes precedence. |
{{ ZKDevelopersGuidePageFooter}} | {{ ZKDevelopersGuidePageFooter}} | ||
Latest revision as of 10:44, 19 January 2022
This documentation is for an older version of ZK. For the latest one, please click here.
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. 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 starting from (0, 0). The information is stored as instance of MouseEvent. Once the application receives the onClick event, it can examine the mouse position co-ordinates from the getX and getY methods.
The example below, will display the co-ordinates that the user clicked.
<imagemap src="/img/sun.jpg" onClick="alert(event.x +”,” +event.y)"/>
The application usually uses the coordinates to determine where a user has clicked, and then responds accordingly.
Area
Instead of the application processing the coordinates, developers can add the area components as children of a imagemap component thus defining a target.
<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 imagemap component will translate the mouse pointer coordinates into a logical name ie. The id of the area the user clicked.
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.