Placing Hypertext Buttons on Images
[Top] [Up] [Next] [Previous]

8.2 - Placing Hypertext Buttons on Images


The A element*1 can be used to define shaped buttons on top of images. The shape is defined by an arbitrary polygon and specified via the SHAPE attribute, e.g.

<FIG SRC="test.gif">
<CAPTION>Click on the triangle or the rectangle</CAPTION>
A line drawing with a
<A SHAPE="0.35,0.1&0.1,0.8&0.35,0.8"	HREF="button1.html">
triangle</A>			and a
<A SHAPE="0.5,0.25&0.5,0.5&0.8,0.5&0.8,0.25" HREF="button2.html">
rectangle</A>
</FIG>
Which could be rendered as:

The example uses scaled coordinates, and shows how you give the vertices of the polygon defining the shape of the button. Like the ISMAP mechanism, you can use pixel-based coordinates by using integer numbers throughout. Note that clicks on shaped buttons take precedence over the ISMAP mechanism for sending events to the server. An efficient algorithm for testing if a mouse/pen click lies inside a polygon is given as a C routine in Appendix III.


HTML+ Discussion Document - November 8, 1993

[Top] [Up] [Next] [Previous]