Dynamic Generation of Menu Structures and JavaScript Rollovers in PHP - Making a Template (
Page 2 of 6 )
Now that we have the basic
building blocks of the page constructed, it's time to put in some of the parts
to automate. At first, however, things should be done manually to make sure they
work. We should start out by inserting some JavaScript into the <HEAD>
tag, preferably after the <TITLE> and <META> tags. Here is the basic
code that we
need:
<script language="JavaScript">
<!-- This script controls the rollovers in the menu area
if (document.images) {
image1off = new Image();
image1off.src = "foo-off.gif";
image1on = new Image();
image1on.src = "foo-on.gif";
otherImage1 = new Image();
otherImage1.src = "foo-b.gif";
otherImageDefault = new Image();
otherImageDefault.src = "default.gif";
}
function changeImages() {
if (document.images) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src =
eval(changeImages.arguments[i+1] + ".src");
}
}
}
// -->
</script>
This introduces the naming convention for the buttons.
Images in their default state, before the rollover, are FOO-OFF.GIF, and during
the onMouseOver are FOO-ON.GIF. The file FOO-B.GIF is for the graphic panel,
which changes as the onMouseOver events occur. DEFAULT.GIF, logically enough, is
the default for this panel graphic, and is what displays when no rollover
occurs.
The only other element to making this script work is in the
anchor tag referring to the other pages in the site:
<a href="foo.html"
onMouseOver="changeImages
('image1', 'image1on', 'otherImage', 'otherImage1')"
onMouseOut="changeImages
('image1', 'image1off', 'otherImage', 'otherImageDefault')">
<img name="image1" src="foo-off.gif" border=0></a><BR>
For the sake of simplicity, I have listed only the
essential parts of the <IMG> tag.
The lines of code above define
the images that load through the "changeImages" JavaScript function when the
onMouseOver and onMouseOut events happen. The name="image1" in the <IMG>
tag ties it into the script defined above.
As you'll soon see, you don't
even really need to know what this does, since PHP will automate it. All you'll
need to keep track of the different graphics files, and that's easy. This page
will probably generate JavaScript errors if displayed in a browser because it is
referencing named items which are not yet defined.
/ 11 
