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

Ordering up a Menu - 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 the JavaScript is properly generated, the page needs a complimentary menu structure for the links to other pages. Let's dive right into the code, replacing the "2 - Menu Area" text with:

<? $i = 0; do { $item = $i + 1; if ($site_pages[$i] == $page) { echo "<img name=\"image" . $item . "\" src=\"$site_pages[$i]-in.gif\" alt=\"" . $site_pages[$i] . ".html\" width=100 height=15 border=0></a><BR>\n"; }else { echo " <a href=\"$site_pages[$i].html\" onMouseOver=\"changeImages('image" . $item . "', 'image" . $item . "on', 'otherImage', 'otherImage" . $item . "')\" "; echo " onMouseOut=\"changeImages('image" . $item . "', 'image" . $item . "off', 'otherImage', 'otherImageDefault')\">"; echo " <img name=\"image" . $item . "\" src=\"$site_pages[$i]-off.gif\" alt=\"" . $site_pages[$i] . ".html\" width=100 height=15 border=0></a><BR>\n"; } $i++; }while ($i < $counter); ?>

It sure does look complicated, but it's pretty much the same HTML anchor tag we put in the TEMPLATE.HTML file above, but parsed to see if the array element is the current page, and with a whole bunch of escape characters and PHP variables.

This code uses the $COUNTER variable defined earlier in the script in another DO loop, and generates the appropriate HTML code with JavaScript support. Line 7 introduces another graphic file, FOO-IN.HTML, which is the "third" button file, the other two being FOO-ON.HTML and FOO-OFF.HTML referenced already in the JavaScript.

The only part left to do is add the HTML line referencing the graphic panel that changes when hovering over the buttons:

<img name="otherImage" src="default.gif" alt=" " width=100 height=100 border=0><BR>

This file can actually be put anywhere in the page, but for the sake of simplicity I put it in the menu structure for this example. Since it is referenced by the "NAME" attribute, this is all that is needed to use this graphic in the onMouseOver effects. JavaScript takes care of the rest.

>>> 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: