Changing Background Image With Javascript

[Pawel Kowalski]

I am trying to set a background of a menu item to a different image with a mouse over event. From what I understand I do that using:

var newpage = document.getElementById(page);
newpage.style.background = "url(images/project_on.gif)";

But when I apply that to my situation it doesn't seem to work properly:

http://mesacreative.com/development/projects.php

When someone hovers over a menu item the project listing on the right changes, I got that working without problems. But when I applied the same method to the menu items it doesn't seem to be working since the background of the menu item should change. Here is my javascript file:

function open_page(page,menu_name) {
	set_menu(menu_name);
	var newpage = document.getElementById(page);
	newpage.style.display = "block";
	// Graphic Swap
	var projects = new Array();
		projects[0] = "project_sdv";
		projects[1] = "project_md";
		projects[2] = "project_tempx";
		projects[3] = "project_bira";
		projects[4] = "project_hdf";
		
	for (i=0;i<projects.length;i++)
	{
		if (projects[i] == page) 
		{
			
		} else {
			close_page(projects[i],menu_name);
		}
	}	
	
}
function close_page(page,menu_name) {
	var newpage = document.getElementById(page);
		newpage.style.display = "none";
	close_menu(menu_name);
}

function set_menu(page) {
	var newpage = document.getElementById(page);
		newpage.style.background = "url(images/project_on.gif)";	
	// Menu Swap When Hovered
	var projects_menu = new Array();
		projects_menu[0] = "menu_md";
		projects_menu[1] = "menu_sdv";
	
	for (i=0;i<projects_menu.length;i++)
	{
		if (projects_menu[i] == page) 
		{
			
		} else {
			close_menu(projects_menu[i]);
		}
	}
}
function close_menu(page) {
	var newpage = document.getElementById(page);
		newpage.style.background = "url(images/project_off.gif)";
}

Any help would be appreciated.

[homoludens]

You can do the menu image change with CSS. You can also do the project listing image change with CSS as well.

If you're worried about using the hover pseudo class with IE < 7, there are a number of behavior / htc solutions on the internet.; this one is referenced alot.

If you're worried about IE being a bit laggy when it loads image rollovers you can use what used to be called sprite maps (IIRC) - ie. have the on and off images combined into one image and use :hover to combine the element's background-position.

Combining the two in IE6 does cause a few extra issues here and there though.

Edits:

It's transparent png htc's and sprite maps that don't play well, due to not being able to set background-position.

[Pawel Kowalski]

I had a css roll over going using the a:hover method (I assume this is what you are talking about, my apologies if its not). However, I would like to leave the background color changed even when someone doesn't have the mouse over the menu item to make the interface a little more user friendly. That way you always know what project you are looking at since it's highlighted for you.

[homoludens]

The problem's not with setting the background with javascript but with your code setting it back to the image off version (I think).

I rewrote the javascript so I could get my head round it, and it worked:

function set_project(project) {

	var projects = ["sdv", "md", "tempx", "bira", "hdf"];
	for (var i = 0, j = projects.length; i<j; i++){
		if(projects[i] === project){
			document.getElementById('project_' + project).style.display = "block";
			document.getElementById('menu_' + project).style.background = "url(images/project_on.gif)";
		}else{
			document.getElementById('project_' + projects[i]).style.display = "none";
			document.getElementById('menu_' + projects[i]).style.background = "url(images/project_off.gif)";
		}
	}
}

I put, eg,

set_project("md"); return false

In your mouseovers.

[homoludens]

The offending line was:

close_page(projects[i], menu_name);

It resulted in the "on" menu being set to "off" for all of the "off" projects.

[Pawel Kowalski]

I only had 2 hours of sleep last night so I might not be able to wrap my head around this until tomorrow. I really appreciate your help, I will get back to you tomorrow when I try it out. Thanks again.

[Pawel Kowalski]

Okay, after a power nap I went a head and played around with this. I decided to use the code you posted since it was way cleaner. I love how you made everything a single function, I am still new to javascript so my code is too complicated. Yours works like a charm, thanks.

[homoludens]

Hey, glad to have helped. I'm sure there's about 6 million better ways of doing it though.