[mrtechnique]

How can I code a website with PHP to where the active menu item image is the mouse over image and is not a link? For example, if I'm on the About Us page of a website, the About Us navigational tab image is the mouse over version of it and is also not a link. I can do this with just a plain html page with no includes, but it would be a pain in the butt to do this with every single page. Thank you in advance.

[jaymanson]

You're in luck - I've been coding something similar recently, so it was easy enough to port it into an example for you Here's the php:

PHP Code:

<?php

// EDIT THIS SECTION ONLY!;

$MenuLinks["yoursite.com/index.php"] = "images/index.gif";
$MenuLinks["yoursite.com/about.php"] = "images/about.gif";
$MenuLinks["yoursite.com/contact.php"] = "images/contact.gif";

// DO NOT EDIT ANYTHING BELOW THIS LINE!;

$CurrentPage = "http://" . $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"];

foreach( $MenuLinks as $link => $image){
    if (strpos($link, "index.") > 0 && !strpos($CurrentPage, "index.") > 0) {
        $HomeLink = explode("index.", $link);
        $FullLink = "http://www." . $HomeLink[0];
        $ShortLink = "http://" . $HomeLink[0];
    } else {
        $FullLink = "http://www." . $link;
        $ShortLink = "http://" . $link;
    }
    if ($CurrentPage == $FullLink || $CurrentPage == $ShortLink) {
        echo "<img class=\"current\" src=\"" . $image . "\" />";
    } else {
        echo "<a href=\"" . $ShortLink . "\"><img src=\"" . $image . "\" /></a>";
    }
}
?>

I'll give you a quick walk-through. The first section creates an array of your menu links and their associated images. The links need to be the full path (without http://www), but the image paths can be relative. The next line after that assigns the current page URL to a string. Finally, the large section compares the current page URL against a few variations of each menu link to check for a match - if it finds one, it sends a different set of HTML back.

It's slightly out of context without seeing it in action with the other files, so I've attached them as a zip archive to this post. Just download, extract, edit the links in the menu.php file to suit your server and you're up and running The HTML & CSS is only there as an example, and can be changed to anything you want - note that you may want to change the echo statements in menu.php to suit your layout.

Hope this helps, and just ask if you don't follow any of it

Jay

[mrtechnique]

Thanks! I'm going to give it a shot.

[mrtechnique]

I started to look at your code. How would I be able to implement the code in your menu.php code into my header. Here's my header code for the image links:

<!--HOME NAV BUTTON-->
<tr>
<td><a href="index.php" onMouseOver="MM_swapImage('Image1','','images/but01Over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/but01.gif" alt="" name="Image1" width="285" height="33" border="0" id="Image1"></a></td>
</tr>
<!--END HOME NAV BUTTON-->

<!--PORTFOLIO NAV BUTTON WITH POP-UP SUBMENUS-->
<tr>
<td><a href="javascript:;" onMouseOver="MM_swapImage('Image2','','images/but02Over.gif',1);MM_showMenu(window.mm_menu_1105200106_0,225,0,null,'Image 2')" onMouseOut="MM_swapImgRestore();MM_startTimeout();"><img src="images/but02.gif" alt="" name="Image2" width="285" height="30" border="0" id="Image2"></a></td>
</tr>
<!--END PORTFOLIO NAV BUTTON WITH POP-UP SUBMENUS-->

<!--OUR PROCESS NAV BUTTON-->
<tr>
<td><a href="website-development-process.php" onMouseOver="MM_swapImage('Image3','','images/but03Over.gif',1)" onMouseOut="MM_swapImgRestore();MM_startTimeout();"><img src="images/but03.gif" alt="" name="Image3" width="285" height="30" border="0" id="Image3"></a></td>
</tr>
<!--END OUR PROCESS NAV BUTTON-->

<!--TESTIMONIALS NAV BUTTON-->
<tr>
<td><a href="testimonials.php" onMouseOver="MM_swapImage('Image4','','images/but04Over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/but04.gif" alt="" name="Image4" width="285" height="30" border="0" id="Image4"></a></td>
</tr>
<!--END TESTIMONIALS NAV BUTTON-->


<!--CONTACT NAV BUTTON-->
<tr>
<td><a href="contact.php" onMouseOver="MM_swapImage('Image5','','images/but05Over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/but05.gif" alt="" name="Image5" width="285" height="40" border="0" id="Image5"></a></td>
</tr>
<!--END CONTACT NAV BUTTON-->

[tomdkat]

I believe you can put the JavaScript that is currently in the anchor tag in the img tag instead, like this:

current:
<td><a href="javascript:;" onMouseOver="MM_swapImage('Image2','','images/but02Over.gif',1);MM_showMenu(window.mm_menu_1105200106_0,225,0,null,'Image 2')" onMouseOut="MM_swapImgRestore();MM_startTimeout();"><img src="http://forums.techguy.org/images/but02.gif" alt="" name="Image2" width="285" height="30" border="0" id="Image2"></a></td>

new:
<td><img src="http://forums.techguy.org/images/but02.gif" alt="" name="Image2" width="285" height="30" border="0" id="Image2" onMouseOver="MM_swapImage('Image2','','images/but02Over.gif',1);MM_showMenu(window.mm_menu_1105200106_0,225,0,null,'Image 2')" onMouseOut="MM_swapImgRestore();MM_startTimeout();"></td>

See what that does.

EDIT: Here is sample HTML that swaps the image without an anchor tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Javascript Image</title>
</head>
<body>
<table style="width: 50%; text-align: left; margin-left: auto; margin-right: auto;" border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="text-align: center;"><img onmouseout="picture.src='./heart-firefox.jpg'" style="width: 150px; height: 167px;" id="picture" onmouseover="picture.src='./test.jpg';" alt="" src="./heart-firefox.jpg"></td>
    </tr>
  </tbody>
</table>
<br>
</body>
</html>

It shouldn't be too hard to write PHP code to do what the img above does.

Peace...