header

Zipped copy of this tutorial

If you prefer to work off line, you can download a zip (289K) containing all the pages and graphics for this tutorial. Extract the contents of the zip to one folder on your hard drive. Load the index.html page into your browser and you can read the whole tutorial, moving on to the following pages, while off line.

Download the tutorial zip here

This tutorial will show you how to code an interface with mouseovers and a screen, writing the coding yourself without using a code generator. It gives you total control over what you are doing, and produces straightforward and economical coding. It is also dead easy!

You can use Notepad to write the coding, or my own favourite program for writing HTML is Arachnophilia, a free program you can download from

The Arachnophilia site

The Interface Graphic

You will need two absolutely identical copies of your interface graphic, one with the buttons as they will be when they are at rest (mouse not on them) and one with the buttons as they will be when the mouse passes over them. The copies must be precisely the same size, the screen and the button size and placement must be exactly the same in both - one pixel off anywhere is disastrous.

remote rest copy          remote mouseover copy

My graphics were made in Paint Shop Pro, but you can use any art package, though it helps enormously if you can use layers or moveable objects.

I made the left hand copy first (the normal at rest one). I filled a rectangle with the wooden background and put the screen in. I then made a separate graphic of one button. It is a small square with a blade pro gold bevel and a diamond image. I copy/pasted this four times onto the remote and arranged the buttons in place. I then merged all the layers and saved this as remote1.bmp. (Don't make a .jpg till the remotes are finished, or every re-save will lower the image quality).

I then returned to the button graphic, selected it and filled it with light grey. I gave that a silver blade pro bevel and a ruby image, and copy/pasted that four times to the merged remote image. I arranged these silver buttons so that they hid the gold ones exactly. They are precisely the same size so if they were a pixel off anywhere, the gold showed. When they were in place, I merged the layers and saved remote2.bmp.

Obviously this interface is very small, in order to keep the tutorial load times short. In practice you would want a bigger one with more buttons, but this type of design is very easy to adapt. One hint - make life easy for yourself by making the screen span as many columns of buttons as you like, but no rows. That way you can code it without a table.

horizontal remoteIf you turn the remote through 90 degrees like this, the screen is now spanning two rows of buttons instead of two columns. You cannot reassemble it after it has been diced without a table, and if you try, there will be a gap between your two rows of buttons. The second row will start level with the bottom of the screen. To avoid that, you have to use a table and the 'rowspan' tag, and you then have to be much more particular about dicing the bits into the same size pieces or multiples of the same size pieces. Even more of a drawback - your finished remote will load more slowly. If you want to see a remote that was quite difficult to dice and reassemble, and needed a table, take a look at the one on my graphics page, where I have imprudently put the screen in the middle with buttons all around it. But be warned - it is a long, slow download.

My remote

Move on now to look at dicing the remote.

next page