Home arrow PHP arrow Page 2 - Dynamic Generation of Menu Structures and JavaScript Rollovers in PHP

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.

  1. Dynamic Generation of Menu Structures and JavaScript Rollovers in PHP
  2. Making a Template
  3. Starting to Automate
  4. The power of repetition
  5. Ordering up a Menu
  6. Adding Pages
By: Chris Mospaw
Rating: starstarstarstarstar / 11
May 10, 1999

print this article


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.

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

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Hackers Compromise PHP Sites to Launch Attac...
- Red Hat, Zend Form OpenShift PaaS Alliance
- PHP IDE News
- BCD, Zend Extend PHP Partnership
- PHP FAQ Highlight
- PHP Creator Didn't Set Out to Create a Langu...
- PHP Trends Revealed in Zend Study
- PHP: Best Methods for Running Scheduled Jobs
- PHP Array Functions: array_change_key_case
- PHP array_combine Function
- PHP array_chunk Function
- 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...

Developer Shed Affiliates


Dev Shed Tutorial Topics: