CalHTMLPane v2.0 Guide Example Tag Usage


4: Images

Tag: MAP
Tag:AREA
Attr: usemap

Synopsis:
The CalHTMLPane supports the rect, circle and poly shapes within the AREA tag.

Coords can be expressed in absolute or percentage terms.

Example 1:

<P align=center>
<IMG src="images/map.gif" usemap="#test" width=200 height=100>
<MAP name=test>
<AREA shape="rect" coords="25,25,55,85" href="maprect.html" target=myiframe2>
<AREA shape="circle" coords="100,50,15" href="mapcircle.html" target=myiframe2>
<AREA shape="poly" coords=150,25,125,70,175,70 href="maptriangle.html" target=myiframe2>
</MAP>
<P align=center>
<TABLE frame=void rules=all cellspacing=0 cellpadding=0>
<TR><TD bordercolor=black>
<IFRAME frameborder=0 scrolling=no name="myiframe2" width=300 height=100></IFRAME>
</TD></TR>
</TABLE>

Rendering:


Example 2:
In the first example we used the actual size of the image (200 x 100 pixels) and used the real coords of the shapes within that image. If we placed the image in a document at a different size (say 250 x 125 pixels) the imagemap would no longer work correctly. However, by using percentage instead of absolute coordinates we can place the image at any size within our document, providing its aspect ratio is maintained.

Take the rectangle as an example. You can see that its coords in the 200 x 100 image are 25, 25, 55, 85. This is equivalent to 12.5%, 25%, 27.5%, 85%. We can't use fractions so we enter these coords into the map as:

coords="12%,25%,27%,85%"

The percentage coords are therefore slightly inexact, but this is not normally much of a problem.

Here's the whole example using percentage coords, demonstrating that two completely different image sizes can use the same map:

<P align=center>
<IMG src="images/map.gif" usemap="#test2" width=300 height=150>
<IMG src="images/map.gif" usemap="#test2" width=150 height=75>
<MAP name=test2>
<AREA shape="rect" coords="12%,25%,27%,85%" href="maprect.html" target=myiframe3>
<AREA shape="circle" coords="50%,50%,7%" href="mapcircle.html" target=myiframe3>
<AREA shape="poly" coords=75%,25%,62%,70%,87%,70% href="maptriangle.html" target=myiframe3>
</MAP>
<P align=center>
<TABLE frame=void rules=all cellspacing=0 cellpadding=0>
<TR><TD bordercolor=black>
<IFRAME frameborder=0 scrolling=no name="myiframe3" width=300 height=100></IFRAME>
</TD></TR>
</TABLE>

Rendering:


Guide Index  |  JavaDoc  |  Previous  |  Next