One of the shortcomings of HTML is lack of ability to overlay one object over another. However, with the judicious use of tables and a little help from some one pixel gifs, one can trick Netscape into a reasonable amount of overlay.
The overlay is possible because, while one may set a column to be very narrow, for example five pixels wide, graphics placed in such a column will extend out of the column for their full width (or the width that you specify with the WIDTH command). If one then sets SPACE to slightly more than the column width, the image will actually appear in the next column. In the next column, you can put anything that you want. This includes, text, images, and form elements. They will nicely overlay the picture. All of the following examples use this trick.
Column borders have been made visible in the examples, but the table could just as well be borderless; in that case, little evidence of the trickery is visible.
Credits In the demonstration panels which follow this Credits table, gifs and ideas were obtained from the following sources: Liberal use has been made of the one pixel gifs and the ideas provided by Carl Tashian . This page has many more examples of interesting HTML.
How do they do that with HTML? The gif of the apple came from CSUBioWeb. I searched all over the web looking for gifs of photographs of fruit and this is the only page on which I found some. This page is a wonderful tutorial on the classification of fruit types.
Fruit Key The gif of the pansy came from Randy D.Ralph. Check out this site for many other fine images which can be used on your HTML pages.
Icons and Images Collection
Flowers for the Internet
This is the simplest of the panels. The Morphic Molecules diamond image is placed in the narrow left column. Header text and four radio buttons are placed in the second wide column. The HTML looks like this.
< TABLE CELLSPACING=0 CELLPADDING=1 BORDER >
< TR ALIGN=LEFT VALIGN=MIDDLE >
< TD WIDTH=5 >
< IMG WIDTH=189 HEIGHT= 197 VSPACE=2 HSPACE=7 BORDER=2 SRC="images/pat_sid_.gif" >
< /TD >
< TD WIDTH=200 >
< CENTER > > < B > > < H3 > Shapes < /H3> < /B > < /CENTER >
< CENTER > < SUB > Please choose your< BR > favorite shape:</SUB> <BR> </CENTER >
< BLOCKQUOTE >
< INPUT TYPE="Radio" NAME="Shape" VALUE="Circle" > Circle < BR >
< INPUT TYPE="Radio" NAME="Shape" VALUE="Square" > Square < BR >
< INPUT TYPE="Radio" NAME="Shape" VALUE="Triangle" > Triangle <BR>
< INPUT TYPE="Radio" NAME="Shape" VALUE="Diamond" > Diamond <BR>
< /BLOCKQUOTE >
< /TD >
< /TR >
< /TABLE >
Each of the image bars is formed from a 1 x 1 pixel Gif image. Netscape will stretch or shrink an image to fit within the dimensions which you give it. The first image is a transparent pixel. This pixel can be used for all sorts of spacing. In this case, it is used to spaced down from the top of the table cell. It is borderless whereas the other, colored bars are drawn with borders. The HTML for column 2 looks like this:
- Morphics Molecules diamond image
- Six image bars
- Header and radio buttons.
It is tricky to match up the bars with the radiobuttons. Notice that the HSPACE=30 tag is responsible for horizontal placement of the bars. There is nothing new in columns 1 and 3.< TD WIDTH=5>
<IMG WIDTH=150 HEIGHT=64 VSPACE=2 HSPACE=30 SRC="images/dot_clea.gif"> <BR>
<IMG WIDTH=150 HEIGHT=16 VSPACE=1 HSPACE=30 BORDER=1 SRC="images/dot_red.gif" > <BR>>
<IMG WIDTH=150 HEIGHT=16 VSPACE=0 HSPACE=30 BORDER=1 SRC="images/dot_blue.gif"><BR>
<IMG WIDTH=150 HEIGHT=16 VSPACE=1 HSPACE=30 BORDER=1 SRC="images/dot_dark.gif"> <BR>
<IMG WIDTH=150 HEIGHT=16 VSPACE=0 HSPACE=30 BORDER=1 SRC="images/dot_gree.gif"> <BR>
<IMG WIDTH=150 HEIGHT=16 VSPACE=1 HSPACE=30 BORDER=1 SRC="images/dot_peri.gif"> <BR>
</TD>
- The two lines of header text.
- A clear 1 X 1 pixel gif image, appropriately sized; the ALIGN=LEFT tag is used to allow the subsequent text to line up beside it.
- The radio buttons.
In the example panels, two panels are combined into a table row. This is the only way to get panels side-by-side; tables cannot be made to float like images. The two rows might easily have also been combined into a single table. Any number of combinations can be overlayed in this fashion. If you do not want the panel to be obviously included in a table, omit the BORDER command. Panels can be horizontally spaced with the CELLPADDING and/or CELLSPACING tags as well as the inclusion of empty columns. To make a column empty, simply include the <BR> tag in it.
- The Morphics Molecules Diamond image.
- The pansy image.
- The header text and radio buttons.