Overlay tutorial page 3

Overlay tutorial - page 3

4. Inserting the required code in a web page.

You will now open your HTML editor or use Notepad to make the web page. Copy the following code and paste it to Notepad or your editor. I have given notes about some portions of code on the right. There is a printer-friendly link at the end of this page.

Save your web page as an html file e.g creekoverlay.html. If using Notepad, make sure that the All Files is chosen from the drop-down box next to Save File As, otherwise it will save as a text file. This file is saved to the Overlay Applet folder on your hard drive.

<html>
<head>
<title>Creek Overlay Applet</title>
</head>
<body>
<center>
<table border="0" cellpadding="0" cellspacing="0" width="354">
<tr>
<td><img src="creektop.jpg" width="354" height="232" alt="creek overlay" border="0" align="top" >
</td></tr>
<tr>
<td align="top">
<applet code=lake.class width="354" height="211">
<param name=image value="creek.jpg">
<param name=horizon value="50">
<param name=speed value="20">
<param name=overlay value="creekol.gif">
</applet></tr></td></table>
</body>
</html>
The title can be changed to one of your own, if you wish.

The tags from <html> to <body> are heading tags in a web page. I have used the <center> tag to place the applet in the center of the webpage. Omit this if you want it placed on the left-hand side.

These are the table tags and the creek top is inserted as data in the first table row. The alt is a courtesy for those that use readers on web pages and the <align="top"> tag places the creektop.jpg right against the top of the table cell. The first table data and table row are closed with tags and the next row and data coded. This is where the applet is placed. Again the <align="top"> tag is used and this must be inserted so there are no gaps between the top piece and the applet.

Note that the applet width (354 pixels) and height (211 pixels) are the same as the original JPG image (creek.jpg) minus one or two pixels. Do not use the doubled height that you used when making the overlay final canvas.

The horizon value changes the postion where the water movement begins. You can change this up or down depending on your image. It starts at the top, so this value is 50 pixels from the top of the applet image.

The speed value determines the speed of the 'waves' in the applet and can be adjusted.

The overlay value is the name of the gif that you have created.

The remaining tags are closing tags for the applet, the table and the web page.

Note the placement of the </tr></td> and </table>. If these are on the row below the </applet> tag, a gap will appear under the overlay.

There are more details on using the horizon parameter in the horizon tutorial.

Close Notepad and navigate to your folder and click on the web page file (creekoverlay.html). It will display the same icon as your browser, (Netscape or Internet Explorer). If not, you may have to check that you saved it as All Files, if you were working in Notepad.

The finished overlay:

Your overlay and applet should be displayed. Examine it critically. You may decide that the overlay needs a little more tweaking, or that the horizon parameter needs lifting or lowering a little. You may want to adjust the wave speed too. If you intend to upload your pages to the web don't forget to optimize your images to reduce file size. Visitors have to wait a little for the applet to load and smaller image sizes help speed this process along. There is a link to a program here.

As you become more proficient at these you can add colors to reflect in the water, invert objects so that they reflect correctly and so on. I will leave you to explore for yourself. Have fun!
Feel free to post your url on the message board so others can see your efforts. If you strike problems there is a forum for help here too.

Click here for a Printer Friendly version of the code

Tutorial Index.