imagemapコンポーネントは特別なイメージです。i mageコンポーネントが受け取るすべてのプロパティを受け取ります。しかし、imageとは異なっていて、ユーザーがイメージ上でクリックをしたら、onClickイベントとマウス位置の座標は両方サーバーに送り返されます。対照的に、imageの場合はonClickイベントは座標を含まないで送信されます。
マウス位置座標は左上の隅を（０，０）として、画面のピクセルを数えます。org.zkoss.zk.ui.event.MouseEventのインスタンスとして保存されます。一度、アプリケーションがonClickイベントを受け取ると、getX と getYメソッドでマウスの位置座標を調べます。
例えば、もしユーザーが左上から208ピクセル右、205ピクセル下という点をクリックしたら、以下のステートメントからイメージが表示されます。
<imagemap src="/img/sun.jpg" onClick="alert(event.x + ", " +event.y)"/>
アプリケーションは大抵座標を使用して、ユーザーがクリックした場所を決めます。そして、それにしたがってレスポンスをします。
アプリケーション自体が座標を処理する代わりに、開発者がimagemapコンポーネントの子要素としてareaコンポーネントを加えることができます。
<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>
次に、imagemapコンポーネントはマウスの位置座標をロジック名へ翻訳します。：ユーザーがクリックしたエリアの識別子。
例えば、ユーザーは(150,150)でクリックしたら、以下のように結果を得ます。
エリアコンポーネントは３タイプの形をサポートしています：circle・ polygon ・ rectangle。マウスの座標は左上を(０，０)として、スクリーンのピクセルを数えたものです。
|
形 |
コーディネイト / 説明 |
|---|---|
|
circle |
coords="x, y, r" ピクセルの中で中心をｘとｙで指定して、ｒを半径とします。 |
|
polygon |
coords="x1, y1, x2, y2, x3, y3..." ｘとｙのペアが多角形(ポリゴン)の頂点を定義します。３角形を定義するのに、少なくとも３点のｘとｙが必要です。ポリゴンは自動的に閉じます。つまり、領域を閉じるためにリストの終わりで初めの座標をもう一度指定する必要はありません。 |
|
rectangle |
coords="x1, y1, x2, y2" 初めの座標のペアは四角形の角の一つで、他のペアは対角にある反対の角です。四角形は四つの辺の多角形を指定する方法を単純にしたものです。 |
一つのareaコンポーネント中の座標が他をオーバーラップする場合、初めに設定されたものが優先されます。