Dynamic Generation of Menu Structures and JavaScript Rollovers in PHP - Ordering up a Menu
( Page 5 of 6 )

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