170 lines
5 KiB
HTML
170 lines
5 KiB
HTML
|
<HTML>
|
||
|
|
<BODY bgcolor=ffffff>
|
||
|
|
<P>
|
||
|
|
<TABLE width=100% cellspacing=0 cellpadding=0>
|
||
|
|
<TR>
|
||
|
|
<TD>
|
||
|
|
<FONT size=-1><B>CalHTMLPane v2.0 Guide</B></FONT>
|
||
|
|
</TD>
|
||
|
|
<TD align=right>
|
||
|
|
<FONT size=-1><B>Example Tag Usage</B></FONT>
|
||
|
|
</TD>
|
||
|
|
</TR>
|
||
|
|
</TABLE>
|
||
|
|
<HR width=100% size=1 color=black>
|
||
|
|
<P>
|
||
|
|
<FONT size=+1><B>4: Images</B></FONT>
|
||
|
|
<P>
|
||
|
|
<BLOCKQUOTE>
|
||
|
|
<P>
|
||
|
|
<B>Tag: MAP</B><BR>
|
||
|
|
<B>Tag:AREA</B><BR>
|
||
|
|
<B>Attr: usemap</B>
|
||
|
|
<P>
|
||
|
|
<TABLE border width=100% cellpadding=6 align=center>
|
||
|
|
|
||
|
|
<TR>
|
||
|
|
<TD>
|
||
|
|
<B>Synopsis:</B><BR>
|
||
|
|
The CalHTMLPane supports the rect, circle and poly shapes within the
|
||
|
|
AREA tag.
|
||
|
|
|
||
|
|
<P>Coords can be expressed in absolute or percentage terms.
|
||
|
|
</TD>
|
||
|
|
</TR>
|
||
|
|
|
||
|
|
<TR>
|
||
|
|
<TD>
|
||
|
|
<B>Example 1:</B>
|
||
|
|
<P>
|
||
|
|
<table align=center bgcolor=ffffdd cellspacing=0 cellpadding=4 rules=none bordercolor=black frame=border>
|
||
|
|
<tr>
|
||
|
|
<td><FONT color=navy>
|
||
|
|
<P align=center><BR>
|
||
|
|
<IMG src="images/map.gif" usemap="#test" width=200 height=100><BR>
|
||
|
|
<MAP name=test><BR>
|
||
|
|
<AREA shape="rect" coords="25,25,55,85" href="maprect.html" target=myiframe2><BR>
|
||
|
|
<AREA shape="circle" coords="100,50,15" href="mapcircle.html" target=myiframe2><BR>
|
||
|
|
<AREA shape="poly" coords=150,25,125,70,175,70 href="maptriangle.html" target=myiframe2><BR>
|
||
|
|
</MAP><BR>
|
||
|
|
<P align=center><BR>
|
||
|
|
<TABLE frame=void rules=all cellspacing=0 cellpadding=0><BR>
|
||
|
|
<TR><TD bordercolor=black><BR>
|
||
|
|
<IFRAME frameborder=0 scrolling=no name="myiframe2" width=300 height=100></IFRAME><BR>
|
||
|
|
</TD></TR><BR>
|
||
|
|
</TABLE><BR>
|
||
|
|
|
||
|
|
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
<P>
|
||
|
|
</TR>
|
||
|
|
</TD>
|
||
|
|
|
||
|
|
<TR>
|
||
|
|
<TD bgcolor=papayawhip>
|
||
|
|
<B>Rendering:</B>
|
||
|
|
<BR>
|
||
|
|
<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>
|
||
|
|
<BR>
|
||
|
|
</TD>
|
||
|
|
</TR>
|
||
|
|
|
||
|
|
<TR>
|
||
|
|
<TD>
|
||
|
|
<B>Example 2:</B><BR>
|
||
|
|
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.
|
||
|
|
|
||
|
|
<P>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:
|
||
|
|
<P align=center>coords="12%,25%,27%,85%"
|
||
|
|
<P>The percentage coords are therefore slightly inexact, but this is not
|
||
|
|
normally much of a problem.
|
||
|
|
|
||
|
|
<P>Here's the whole example using percentage coords, demonstrating that two
|
||
|
|
completely different image sizes can use the same map:
|
||
|
|
<P>
|
||
|
|
<table align=center bgcolor=ffffdd cellspacing=0 cellpadding=4 rules=none bordercolor=black frame=border>
|
||
|
|
<tr>
|
||
|
|
<td><FONT color=navy>
|
||
|
|
<P align=center><BR>
|
||
|
|
<IMG src="images/map.gif" usemap="#test2" width=300 height=150><BR>
|
||
|
|
<IMG src="images/map.gif" usemap="#test2" width=150 height=75><BR>
|
||
|
|
<MAP name=test2><BR>
|
||
|
|
<AREA shape="rect" coords="12%,25%,27%,85%" href="maprect.html" target=myiframe3><BR>
|
||
|
|
<AREA shape="circle" coords="50%,50%,7%" href="mapcircle.html" target=myiframe3><BR>
|
||
|
|
<AREA shape="poly" coords=75%,25%,62%,70%,87%,70% href="maptriangle.html" target=myiframe3><BR>
|
||
|
|
</MAP><BR>
|
||
|
|
<P align=center><BR>
|
||
|
|
<TABLE frame=void rules=all cellspacing=0 cellpadding=0><BR>
|
||
|
|
<TR><TD bordercolor=black><BR>
|
||
|
|
<IFRAME frameborder=0 scrolling=no name="myiframe3" width=300 height=100></IFRAME><BR>
|
||
|
|
</TD></TR><BR>
|
||
|
|
</TABLE><BR>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
<P>
|
||
|
|
</TR>
|
||
|
|
</TD>
|
||
|
|
|
||
|
|
<TR>
|
||
|
|
<TD bgcolor=papayawhip>
|
||
|
|
<B>Rendering:</B>
|
||
|
|
<BR>
|
||
|
|
<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>
|
||
|
|
<BR>
|
||
|
|
</TD>
|
||
|
|
</TR>
|
||
|
|
|
||
|
|
|
||
|
|
</TABLE>
|
||
|
|
|
||
|
|
|
||
|
|
</BLOCKQUOTE>
|
||
|
|
<TABLE align=center width=50%>
|
||
|
|
<TR>
|
||
|
|
<TD align=center>
|
||
|
|
<A href="../CalGuide.html">Guide Index</A> |
|
||
|
|
<A href="../javadoc/overview-tree.html"> JavaDoc</A> |
|
||
|
|
<A href="guide-Frames-iframe.html"> Previous</A> |
|
||
|
|
<A href="guide-Misc-colornames.html"> Next</A>
|
||
|
|
</TD>
|
||
|
|
</TR>
|
||
|
|
</TABLE>
|
||
|
|
|
||
|
|
</BODY>
|
||
|
|
</HTML>
|