Making a Template - PHP

Did you ever have one of those sites that started out small, but kept growing and growing? Adding new pages to a site or removing old ones can often take more time than developing the pages themselves.

TABLE OF CONTENTS:

By: Chris Mospaw

Poor Best

Rating:

/ 11

May 10, 1999

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

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.

Next: Starting to Automate >>



	>>> More PHP Articles >>> More By Chris Mospaw

blog comments powered by Disqus

PHP ARTICLES

- PHP Closures as View Helpers: Lazy-Loading F...
- Using PHP Closures as View Helpers
- PHP File and Operating System Program Execut...
- PHP: Effects of Wrapping Code in Class Const...
- PHP: Building Concrete Validators
- Sanitizing Input with PHP
- Executing Shell Commands with PHP
- Handling File Data with PHP
- File Security and Resources with PHP
- ArrayObject PHP Class Examples
- ArrayObject PHP Class: An Introduction
- Getting File System Data with PHP
- PHP Tools for Working with the File and Oper...
- Working with the File and Operating System w...
- PHP Proxy Patterns: Completing a Blog

Find More PHP Articles

DevShed

PHP Tutorials

Making a Template - PHP

See Also:

Dev Shed Tutorial Topics: