The Mouseover Coding
We have only 5 areas in this remote which will change on mouseover - the screen and the four buttons. Nothing in the coding we have already written will be changed for any of the other areas. That part of our coding is already finished.
For the moment, we will leave the screen and concentrate on getting one button changing on mouseover. When one is done, it is very simple to get the others to do the same.
We have to begin by setting up the Javascript instructions, and these go in the header to your page, between <HEAD> and </HEAD>. You may already have the page title there, and perhaps some META NAME tags containing things like keywords. I usually put the Javascript coding straight after the TITLE.
There are just three sets of things we have to insert in the HEAD area. The first are the Javascript codes
<SCRIPT LANGUAGE="Javascript">
</SCRIPT>
Everything else we put in will go in between those. The next thing is an instruction which will cause the program to load all the graphics being used if the user's browser can see the images in Javascript. If it does not, the graphics will not be loaded and the remote will not be displayed. At the moment we are going to insert only the two lines, this instruction and its closing bracket. As we code the buttons we shall insert the names of the graphics being used into a list between this first instruction and the } which closes it off. So this area is going to grow as we go along. The instruction is
if (document.images) {
}
It is very important that you do not load the code into your browser and attempt to run it while this images list is empty, because the command has no graphics to load and it may give an error message with some browsers if it runs but has nothing to execute. The first thing we do when coding a button is put image names in this list, so once you have coded one button it is quite safe to run the code.
The final coding for this area is a function which goes to the list above when it is called, finds the name of the graphic we want to use, and puts it in the remote in place of the one already there. You can call this function what you like. I have called it hilite. This is the coding
function hilite(imgdocid, imgobjname) {
document.images[imgdocid].src = eval(imgobjname + ".src")
}
Below I am showing the whole of the coding you should have inserted inside your <HEAD> and </HEAD> area. It is printed in red to make it absolutely clear to you.
<SCRIPT LANGUAGE="Javascript">
if (document.images) {
}
function hilite(imgdocid, imgobjname) {
</SCRIPT>
document.images[imgdocid].src = eval(imgobjname + ".src")
}
You can, and should, use linefeeds in this area so that your code looks like the coding above. Be very careful about punctuation, spacing and so on. The key to getting Javascript right is getting the punctuation right, because it will be very unforgiving if you get a bracket round the wrong way or use the wrong punctuation mark.
The rest of the coding goes in the list of the diced bits of your remote, which you have already written. Leaving the screen aside till later, the first button is the one in row 4b, which is called offr4b.jpg. The first thing we have to do is give this button a name. You are not naming the graphic here, but the space it occupies, so that we can tell the program what graphic to put in this space when the mouse touches it, and when the mouse leaves again. I suggest that the simplest name to give it is but4b, which links it to the names we have already given the two graphics which are used there. Naming is very simple - you insert the name into the IMG SRC tag like this.
<IMG SRC="offr4b.jpg" name="but4b">
We have two images that we shall be using on this button, offr4b.jpg when it is off, and onr4b.jpg when it is on. These we must now list in the header area, . This is the format we use, to link these images to the button on and off
but4bon = new Image();
but4bon.src = "onr4b.jpg";
but4boff = new Image();
but4boff.src = "offr4b.jpg";
Write that coding into the filenames list, immediately under if (document.images) {
Be very particular about the punctuation and the layout. In case it is not clear, the characters after new Image are ( and ) with no space between them, and ; following immediately, again with no space.
Now we are ready to add the mouseover coding itself. All the mouseover coding is included, for each button, inside an <A HREF> </A> tag, so begin by putting these tags on either side of what we already have for this button, and add border=0 to the image tag to avoid a line being drawn round it when it is a live button. Do not insert any linefeeds in this coding at any point.
<A HREF><IMG SRC="offr4b.jpg" name="but4b" border=0></A>
Everything else is going to go between A HREF and >. There must be an address for A HREF to call. Later we shall add a genuine URL for the button to link to, but for now we can insert a false address which will keep the Javascript happy until we have that URL. If you were doing this for your website, the page you want to link to may not even be written yet, so you would not know its URL. The false address we use is javascript:void(0) and the coding now reads
<A HREF="javascript:void(0)"><IMG SRC="offr4b.jpg" name="but4b" border=0></A>
Now we add the instructions for what is to happen when the mouse goes over the button. The instruction is onmouseover, and it will call our hilite function, giving the name of the button and the status we want it to have. The function will sort out what graphic is to be used. Again, pay scrupulous attention to the punctuation
<A HREF="javascript:void(0)" onmouseover="hilite('but4b','but4bon');"><IMG SRC="offr4b.jpg" name="but4b" border=0></A>
And finally, we need to insert the instructions for when the mouse moves away. The instruction this time is onmouseout, and works in exactly the same way.
<A HREF="javascript:void(0)" onmouseover="hilite('but4b','but4bon');" onmouseout="hilite('but4b','but4boff');"><IMG SRC="offr4b.jpg" name="but4b" border=0></A>
That is all the coding you need to make that button change when the mouse moves over it. Save your HTML and test it. If the button changes properly when you mouse over it and off it again, you are ready to code the other three. If it does not, go through everything you have written and compare the punctuation and layout with what I have given. Somewhere there will be something that does not match.
When you have this one button working, code the other three in exactly the same way. The easiest way is to copy/paste what you did for this button, and then change every reference to 4b to 4d, 6b or 6d, to suit the one you are doing. In the list of names in the header, you copy/paste to immediately below the ones you inserted before, and change the code letters and numbers. In the remote listing, replace the existing IMG SRC tag for the button you are doing with a pasted copy of everything between and including <A HREF and </A> for the previous one, and then change the button position codes all through it. That way, once you have the punctuation right you will keep it right. When you have done, the remote should work like this one does.
If you are having problems, use your browser's view source or source code option and compare my coding in the header and at the bottom of this page with your own. They should be identical. Debugging is usually a matter of finding a mistyped filename or a wrong punctuation mark. When your four buttons are working as mine do, you are ready to move on to add the screen changes, the URLs to be called when the buttons are clicked, and a nice little touch, entering a personal message in the status bar at the bottom of the browser.
