title: Navigation with CSS and PHP - Image Based Hover Menu (jQuery)
body: <p>I have a menu that is image based (one yellow and one blue, for example).  I designed the buttons in Illustrator and then converted to PNG files.  Right now, I'm using CSS for hovering affects.</p>
  
  <p>So when I hover over the image, it changes.  So this is good (because it works), but its far from perfect (that's why I'm here)... One of my buttons in CSS looks like this:</p>
  
  <pre><code>.home_menu, .about_menu, .video_menu, .demo_menu, .contact_menu {
      float: left;
      margin-bottom: 10px;
      margin-top: 10px;
      margin-left: 10px;
      width: 100px;
      height: 34px;
      display: block;
  }
  
  .home_menu {        
      background: transparent url('../images/buttons/home_but.png');
  }
  
  .home_menu:hover {
      background-image: url('../images/buttons/home_but_hov.png');
  }
  </code></pre>
  
  <p>The HTML is like started out like so:</p>
  
  <pre><code>&lt;div id="main_menu"&gt;
      &lt;a href="index.php" class="home_menu" title="Home"&gt;&lt;/a&gt;
      &lt;a href="index.php/about" class="about_menu" title="About"&gt;&lt;/a&gt;
      &lt;a href="index.php/videos" class="video_menu" title="Videos"&gt;&lt;/a&gt;
      &lt;a href="index.php/demo" class="demo_menu" title="Demo"&gt;&lt;/a&gt;
      &lt;a href="index.php/contact" class="contact_menu" title="Contact"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So basically I'm changing the CSS background image for each class.</p>
  
  <p>Two questions.  First, I'm trying to get each menu to be the blue version when on that page.  So I wrote a PHP function to do this (in a class), just in case I want to avoid JavaScript.  It looks like this:</p>
  
  <pre><code>// Display table and loop through links and images from array
  public function print_navigation($image_dir, $ds, $page_nav, $page_nav_alt, $menu) {
  
      $current_file = explode('/', $_SERVER['PHP_SELF']);
      $current_page = $current_file[count($current_file) - 1];
      $current_page;
      //$i = 0;
  
      foreach ($page_nav as $key =&gt; $value) {
  
          $menu_output .= '&lt;a href="';
          $menu_output .= $key;
          $menu_output .= '" id="';
          $menu_output .= $menu[$key];
          $menu_output .= '" style="background: transparent url(';
  
          if ($current_page == $key) {
              $menu_output .= $image_dir . $ds . $page_nav_alt[$key];
          }
          else {
              $menu_output .= $image_dir . $ds . $page_nav[$key];
          }
  
          $menu_output .= ');"';
          $menu_output .= '&gt;&lt;/a&gt;';
  
          $i++;
      }
  
      echo $menu_output; 
  }
  </code></pre>
  
  <p>It seems to work for the Home page (<code>$home</code> variable), but not for the others.  I have variables like this (arrays and variables in another file, truncated for brevity):</p>
  
  <pre><code>$menu = array(
      $home =&gt; 'home_menu',
      ...);
  
  $page_nav_ylw = array(
      $home =&gt; $home_but_ylw,
      ...);
  
  $page_nav_blu = array(
      $home =&gt; $home_but_blu,
      ...);
  </code></pre>
  
  <p>Then I have all the images in variables, referenced to in the arrays, eg, <code>$home_but_ylw</code> refers to the PNG for that button.</p>
  
  <p>The PHP function is a bit odd, because I use the <code>$key</code> for two arrays, which I'm sure is bad.  But I'm having a hard time getting it to work otherwise.</p>
  
  <p>Second question is:  is there any reason I can't add JavaScript (like jQuery) right on top of this to get me the hover effects so that I can remove it from the CSS?  Ideally I'd like to display the buttons with a PHP loop that also handles current page and then do the hover affects with jQuery.</p>
  
  <p>Sorry for the long post.  Hope it makes sense.</p>
  
  <p>Thanks in advance!</p>