Initial revision
This commit is contained in:
dchandler
parent
8c4ab30a52
commit
0643096899
139 changed files with 10024 additions and 0 deletions
169
extensions/calpa/Docs/html/guide-Images-imagemap.html
Normal file
169
extensions/calpa/Docs/html/guide-Images-imagemap.html
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
<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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue