Adding the screen changes

Before we can use the screen with the mouseovers, we have to make suitable graphics to display there. These must all be made using onr2b.jpg as the background. These are the ones I have made for the four buttons and one for the screen itself, because it too can respond to a mouseover, and display a welcome screen. If you put your cursor on these images, the ALT titles will show you what filenames I have given them.

        

We will code the screen first, and, just as we did with the buttons, we must give it a name.

screenon = new Image();
screenon.src = "screenwelc.jpg";
screenoff = new Image();
screenoff.src = "offr2b.jpg";

There is something of a bonus there, because we shall need screenoff for all the buttons, and we have already listed it, so when we come to code the screen changes for the buttons, we need only put the files for the screen when the mouse is on a button in the list.

Now all we need do for the screen, is enter the mouseover instructions just as we did for the buttons. We shall have to use the false address again, and for the screen that will be permanent because it is not going to be linked to a URL, but just show a welcome screen when the mouse goes over it. This is the full coding for the screen area. When you have entered it, save and test your screen to make sure that it does change when the mouse goes over it. Debug it if it does not.

<A HREF="javascript:void(0)" onmouseover="hilite('screen','screenon');" onmouseout="hilite('screen','screenoff');"><IMG SRC="offr2b.jpg" name="screen" border=0></A>

Entering the screen change for a button is really very easy. You simply insert the instructions for the screen into the existing onmouseover and onmouseout tags. For button 4b, we will link to the homepage, so screenhome.jpg will be used. We enter this into the list in the header.

screen4bon = new Image();
screen4bon.src = "screenhome.jpg";

The new hilite instructions are inserted between the one already there and the " which closes the onmouseover and onmouseout tags. Each hilite instruction terminates with ; outside the closing bracket. This is then the full coding for the mousever and screen change for button 4b

<A HREF="javascript:void(0)" onmouseover="hilite('but4b','but4bon'); hilite('screen','screen4bon');" onmouseout="hilite('but4b','but4boff'); hilite('screen','screenoff');"><IMG SRC="offr4b.jpg" name="but4b" border=0></A>

When you have that button working, make similar changes to the coding for buttons 4d, 6b and 6d. I have used screencats.jpg for 4d, screenfrac.jpg for 6b, and screenem.jpg for 6d. Again, once you have one button working, copy/pasting its coding and changing the button code letters is the best guarantee of not making syntax errors in the others. There is no need to copy the whole coding for the button, just copy the sections for the screen changes, and insert them into the existing coding. Don't forget to put the new filenames in the header listing, just as we did for screenhome.jpg

If all is well, your remote will operate just like mine does here. Again, if you have any problems, use the browser view source code option and compare your code with mine in the header and at the bottom of this page. Once it is all working, move on to the last page, where we will link it up to the URLs so that it goes to the pages when a button is clicked, and we will add the status bar messages.