Swap Navigation Image Rollover and Active

I hope this code will be easy to use. if not then ask away.

1) template.php, add this code there.

<?php
//adds more variables into menu_item.tpl.php to make the menu work
function  _phptemplate_variables($hook, $vars) {
	switch($hook) {
     case 'menu_item' :
		if(!isset($vars['page_title'])){
			$node_info = node_load(arg(1));
			$vars['page_title'] = $node_info->title;
		}
		$parent = menu_get_item($vars['mid']);
		$vars['parent'] = $parent['pid'];
        break;
   }
   return $vars;
}
?>

<?php
//defines a custom menu_item.tpl.php for our menu
function phptemplate_menu_item($mid, $children = '', $leaf = TRUE) {

  return _phptemplate_callback('menu_item', array(
        'leaf' => $leaf,
        'mid' => $mid,
        'children' => $children
    ));
}
?>

2) create a file menu_item.tpl.php in your theme folder (the same folder where your template.php is), put this code in it:

<?php
$link = menu_item_link($mid,false);		//link that we are building. this is the menu item

$data = explode("/",$link['href'],3);   //$data[1] holds the node id which we compare to the URL node id.
$active_menu = "";
if(arg(1) == $data[1])		//checks if the menu item we are building is the page we are currently on
	$active_menu = "_on";

$parent_link = menu_item_link($parent,false);   //this is used to figure out the menu group name. not menu item...

// replace spaces with "_", and strip HTML
$css_id = str_replace(' ', '_',strtolower($link['title']));
$page_title = str_replace(' ', '_',strtolower($page_title));		//this gives us page title, in my file structure i store all images relating to a page in it's own folder.
$parent_link = str_replace(' ', '_',strtolower($parent_link['title']));

//render the initial menu image
$img_link = "/themes/[your theme]/images/menu/$parent_link/$page_title/$css_id{$active_menu}.jpg";
$img = "<img onmouseover=\"over('$parent_link','$page_title','$css_id');\" 
onmousedown=\"on('$parent_link','$page_title','$css_id');\" 
onmouseout=\"out('$parent_link','$page_title','$css_id','$active_menu');\" 
onmouseup=\"out('$parent_link','$page_title','$css_id','$active_menu');\" src=\"$img_link\" id=\"$css_id\" border=\"0\">";
print "<a href=\"?q={$link['href']}\">$img</a>\n";
?>

3) create a javascript file of any name you want with this code in it (and make sure to link this js file to your page.tpl.php):

function get(id){
	return document.getElementById(id);
}
function over(link, title, id){
	get(id).src = "/themes/[your theme]/images/menu/"+ link+"/"+title+"/"+id+"_over.jpg";
}
function on(link, title, id){
	get(id).src = "/themes/[your theme]/images/menu/"+ link+"/"+title+"/"+id+"_on.jpg";
}
function out(link, title, id, active){
	get(id).src = "/themes/[your theme]/images/menu/"+ link+"/"+title+"/"+id+active+".jpg";
}

Then in your administer > menu, you create a menu, and add menu items to it.

also it is very important to keep the file structure correct so this code knows where to get the images from.

themes/
....[your theme]/
...........images/
................menu/
...................menu_name/
......................page_title/
...........................menu_name.jpg <<

my images have the regular state, the "_on" and "_over" state. you can choose your own indicators and i'm sure you can edit the code to reflect yoru naming standards.

when everything is setup (menu created and menu items assigned in the admin, files and folders placed correctly) you will need to go into administer > blocks and assign your menu to some block in your theme and it will show up.

i will not go into theming your menu (as in position between images and other css stuff), i'm sure you can figure out the css (i'm still puzzled by it)

I hope i didnt leave anything out. feel free to ask.