# PHP code for active menu item



## mrtechnique (Jan 3, 2007)

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 (Mar 18, 2007)

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

// 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 "[URL]<img src=\"" . $image . "\" />[/URL]";
	}
}
?>
```
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 (Jan 3, 2007)

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


----------



## mrtechnique (Jan 3, 2007)

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:

[WEBQUOTE="Header Code"]

[TR]
[TD][/TD]
[/TR]



[TR]
[TD][/TD]
[/TR]



[TR]
[TD][/TD]
[/TR]



[TR]
[TD][/TD]
[/TR]



[TR]
[TD][/TD]
[/TR]

[/WEBQUOTE]


----------



## tomdkat (May 6, 2006)

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

current:
[TD]*javascript:;*[/TD]

new:
[TD]*







*[/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...


----------

