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