Imagemap

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).

Shape	Coordinates / Description
circle	coords="x, y, r" where x and y define the position of the circle’s center and r is the radius in pixels.
polygon	coords="x1, y1, x2, y2, x3, y3..." where each pair of x and y 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 area component overlap with another, the first one takes precedence.