Multiple identical scripts

[T1000Android]

Hello guys!I am fairly new to the javascript world and I am trying to design a menu using javascript. The menu has about 17 different items and I want each menu item to change its background image when i hover the mouse over it. I have the following code:

function normal1(){		 document.getElementById("menu_item1").style.background="url('images/list_background.gif') no-repeat";}function hover1(){		 document.getElementById("menu_item1").style.background="url('images/list_hover_background.gif') no-repeat";}

This code works fine, but it goes up to normal17() and hover17(). It will probably take a long time to load when someone visits the page, its a real pain if I change the name of the background image and if I want to copy it to other pages and change some values. Is there any way to make a single pair of functions for all 17 elements, maybe using the "this" keyword? I have no idea how to use the "this" keyword and I was hoping you guys could tell me. Thanks!

[Don E]

Are you just trying to do a hover/roll over effect? If so, you can make it way more simple by using CSS sprites. http://www.w3schools.com/css/css_image_sprites.asp

[T1000Android]

No, the problem is that I dont know how to make a single code segment to work for all 17 menu items. Each menu item currently has its own id (id="menu_item1....17") and thus I have to have 17 different pairs of functions to change the background on hover and revert the background on mouse out.

[Don E]

You can have two functions where both use the switch statement. One function for hover and the other for normal. Each element can have a onmouseover = "hover(this.id);" and onmouseout = "normal(this.id);"hover() function can look something like this:

function hover(currentElement){switch(currentElement){case 'menu_item1':  document.getElementById("menu_item1").style.background="url('images/list_hover_background.gif') no-repeat";  break;case 'menu_item2':  document.getElementById("menu_item2").style.background="url('images/list_hover_background.gif') no-repeat";  break; case 'menu_item3':  document.getElementById("menu_item3").style.background="url('images/list_hover_background.gif') no-repeat";  break;etcetcetc}}

Then for onmouseout="normal(this.id)";

function hover(currentElement){switch(currentElement){case 'menu_item1':  document.getElementById("menu_item1").style.background="url('images/list_background.gif') no-repeat";  break;case 'menu_item2':  document.getElementById("menu_item2").style.background="url('images/list_background.gif') no-repeat";  break;case 'menu_item3':  document.getElementById("menu_item3").style.background="url('images/list_background.gif') no-repeat";  break;etcetcetc}}

[T1000Android]

Yes I see the logic in your code but this code also has, if not a function, a different statement for each id.And can you please tell me the role of "this" in this case?

[thescientist]

OR! you can just use CSS (as already stated). use classes and pseudo classes to apply the same functionality to all elements. but, if you really have your heart set on using JS, you can take the concept of Don E's example, and make a whole lot simpler, since his example didn't really get at the heart of the issue that you were trying to overcome.

<div onmouseout="normal(this)" onmouseover="hover(this)"></div> function hover(ele){  ele.style.background = 'url('images/list_hover_background.gif') no-repeat';}; function normal(ele){  ele.style.background = 'url('images/list_background.gif') no-repeat';};

I ideally you want to unobtrusively target all your elements without inline javascript, but one step at a time.

[Don E]

I was thinking by this statement

I have to have 17 different pairs of functions to change the background on hover and revert the background on mouse out.

... that you had to have 17 statements of some kind for each div, or that's what you wanted. If that's not the case then the way thescientist illustrated is the best way to go in your case. "this" passes the element(div in your example) to the functions. It's basically saying "pass this div into the function hover".

[ShadowMage]

FWIW, Don E's suggestion (post 4) would work without the switch statements as well by doing just this: document.getElementById(currentElement).style.background = '...' since the id is what he was passing to the function as a parameter. It is the same concept that scientist illustrated, except scientist's would be a little more efficient because it's passing the element itself, which saves the extra step of retrieving the element reference again.