Coding a remote (3)

Reassembling the diced remote
We shall begin by writing the piece of code which will reassemble the off copy of the remote. This will be the basis of the whole coding for the remote, and we shall insert into it the mouseover instructions and the instructions for going to a page when you click on a button. It will grow to quite a large piece of code, but it will do so step by step and you will always be able to see what is happening.
Write this code in Notepad or Arachnophilia, not in a WYSIWYG web design package like Front Page. Those have a habit of changing what you have written or inserting line feeds into your coding to make the listing look pretty. In this sort of coding you must have total control and what you have written must not be changed.
To reassemble the remote, you list all the diced pieces in order, with a instruction at the end of every row. I am centring this on the page by putting all the coding between <center> and </center>.
We have only one piece in the first row, so it will read
<center><IMG SRC="offr1.jpg"> </center>
The second row has three pieces, and inserting those will give us
<center><IMG SRC="offr1.jpg"> <IMG SRC="offr2a.jpg"><IMG SRC="offr2b.jpg"><IMG SRC="offr2c.jpg"> </center>
Note that there are no line feeds in this coding at all. The lines break naturally where they find a space, usually between IMG and SRC.
The code with all the lines inserted looks like this
<center><IMG SRC="offr1.jpg"> <IMG SRC="offr2a.jpg"><IMG SRC="offr2b.jpg"><IMG SRC="offr2c.jpg"> <IMG SRC="offr3.jpg"> <IMG SRC="offr4a.jpg"><IMG SRC="offr4b.jpg"><IMG SRC="offr4c.jpg"><IMG SRC="offr4d.jpg"><IMG SRC="offr4e.jpg"> <IMG SRC="offr5.jpg"> <IMG SRC="offr6a.jpg"><IMG SRC="offr6b.jpg"><IMG SRC="offr6c.jpg"><IMG SRC="offr6d.jpg"><IMG SRC="offr6e.jpg"> <IMG SRC="offr7.jpg"> </center>
If you type in that coding, save it as remote.html into the same folder as your diced pieces, load it into your browser and run it, this is what you should see

If you have anything misplaced, then you have made an error somewhere in the listing, and you must find and correct it before you continue. If you have missed out a < somewhere, or mistyped a filename, or left out the " and " around a filename, then the remote will not reassemble properly. If you miss out a at the end of a row, you will find one row of your remote sticking out to the right of its predecessor instead of underneath it. Debugging as you go along is vital. Always test what you have done and make sure it is right before going on to the next stage.
With a simple remote like this you can test each line as you type it in if you are using Arachnophilia. If you are using Notepad you will have to save the HTML every time you want to test it, so that you can load it into your browser. With a more complicated remote which uses a table, the graphic is not reassembled properly until the whole table is complete, and testing that with the code half written would give you the impression you had done something wrong. So you would need to write all the code before testing if you are assembling in a table.
Be sure that you understand the principle, that the rows of diced pieces are listed inside IMG SRC tags, in the order that they appear in the remote, running from left to right along each row, with a at the end of each row, and the rows listed in the order top to bottom.
When your coding puts your graphic together in one piece, you are ready to move on to insert the mouseover code.