header14.jpg - 19kb

If you wish to download a copy of this tutorial to work off line, click here. Unzip all the files in the zip to the same folder on your hard drive, and open the index.html page in your browser.


This tutorial can be used for any kind of applet image. I am using David Griffiths' Lake applet, and the picture I am going to frame is this one.

The dimensions of the image being reflected in the lake applet picture are 320x115. The dimensions used for the applet are 320x225, and that is the size of the picture you are seeing here. When you are using lake applet, the height of the displayed image has to be twice that of the original, less a few pixels, so that is the size of frame we have to make to fit this picture. With a snow applet, the height of the original image and the displayed picture would usually be the same. Whatever applet you are using, the dimensions of the displayed image when the applet is running are the dimensions you use for your frame.

You can make your frame in any art package that you choose. I made mine in PhotoImpact. Open an image in your art package which is the same size as your displayed image - for my picture it was 320x225. You can use any background colour for this which will be a clear enough contrast for you to see where the centre ends and the frame begins. I used white. Frame this image with a frame that is suitable for your finished applet picture. You will have an image which looks something like the one below. Save it in bitmap format if you are going to use Dicer, or use the dicing option in your art package if it has one.

frame.jpg - 23kb

The dicing lines must go right across this image, exactly where the frame meets the centre space. Below I show what the dicing lines will look like in Dicer, Paint Shop Pro and PhotoImpact.

dicer.jpg - 28kb DICER

psp.jpg - 59kb PSP

pi.jpg - 47kb PI

The easiest way to do this in Paint Shop Pro and PhotoImpact is to choose the equal size grid, set it at 3 rows x 3 columns, and then move the lines to the inside edges of the frame. In both programs you can zoom in on the image to see that the lines are in the right place. Make sure that you are saving the diced pieces as jpgs, and that you do not over-compress them.

I have not included any URLs in any of the slicers, because we are not dicing this to make a remote with links. Whichever dicer/slicer you use, there will be 9 jpg sections of image and a piece of html produced. Discard the html and the piece from row 2, column 2, (the large piece from the centre of the frame image). You should keep only the pieces of frame. I used Paint Shop Pro to dice mine, and it gives useful filenames which show which row and column the pieces belong to. Now all that remains is to write the code to reassemble the frame, and put the applet coding in the centre cell where the large piece of image that we discarded lived. We will make a table of 3 rows with 3 cells in each row, with cellpadding and cellspacing at 0 and border at 0. Each of the pieces goes into the appropriate cell in the table, in an <IMG SRC> tag, with the applet code going in Row 2, cell 2. It is important not to hit RETURN while you are typing this code in. It must be all one long 'sentence' or you will get a venetian blind affect in your image. The lines will break naturally where there is a space in the coding.

I found that I had been one pixel off in my slicing, and there was a one-pixel gap between the second and third columns. I should have re-sliced it, but there is a much easier remedy. I reduced the width of the applet by one pixel, and got a perfect fit. If you find you have a gap between the second and third rows, reduce the applet height by a pixel. If you are only one pixel out nobody will notice. If you have a bigger gap, then re-slicing is the remedy.

This is the coding.

<center><table cellpadding=0 cellspacing=0 border=0>
<tr><td><img src="Image9_1x1.jpg" width="40" height="39"
alt="Image9_1x1.jpg - 2kb" border="0"></td><td><img
src="Image9_1x2.jpg" width="319" height="39" alt="Image9_1x2.jpg - 9kb"
border="0"></td><td><img src="Image9_1x3.jpg" width="40"
height="39" alt="Image9_1x3.jpg - 3kb" border="0"></td></tr><tr><td><img src="Image9_2x1.jpg" width="40" height="225" alt="Image9_2x1.jpg - 7kb"
border="0"></td><td><APPLET CODE="lake" width="319"
height="225"><param name="image" value="forapplet2.jpg"></applet></td><td><img src="Image9_2x3.jpg" width="40" height="225" alt="Image9_2x3.jpg - 8kb"
border="0"></td></tr><tr><td><img src="Image9_3x1.jpg" width="40" height="41" alt="Image9_3x1.jpg - 2kb" border="0"></td><td><img src="Image9_3x2.jpg"
width="319" height="41" alt="Image9_3x2.jpg - 10kb" border="0"></td><td><img src="Image9_3x3.jpg" width="40" height="41" alt="Image9_3x3.jpg - 3kb"

and this is the image.

Image9_1x1.jpg - 2kbImage9_1x2.jpg - 9kbImage9_1x3.jpg - 3kb
Image9_2x1.jpg - 7kbImage9_2x3.jpg - 8kb
Image9_3x1.jpg - 2kbImage9_3x2.jpg - 10kbImage9_3x3.jpg - 3kb

When you put a framed applet on your website, it is vital for the html, java class, and all the images to be in the same folder. If you normally keep your images in a separate graphics folder, away from your html, that will not work with most applets.


The landscape I used in this image was generated in Vue d'Esprit.

grafbut2.jpg - 4kb

Return to the graphics page