[ Easy Question ] Image changing JavaScript code problem

[Clanstrom]

Hi there all, just joined today loved this site already.

My Question is that. i am trying to create 6 Menus for my Web. like Eg { home, about us, service ..... } and i want the images to change whenever the users mouse hovers the menu's. I got the scrip actually from online souce. But it was an example for one image Here are the codes:

function roll_over(img_name, img_src)
   {
   document[img_name].src = img_src;
   }

And for the body

<A HREF="some.html" onmouseover="roll_over('but1', 'icon2.gif')"
onmouseout="roll_over('but1', 'icon1.gif')">
<IMG SRC="icon1.gif" WIDTH="100" HEIGHT="50"
NAME="but1" BORDER="0">
</A>

Now i tried to multiply these five times, ( just repeated the codes and changed the picture name ) - But whenever i hover on the images they do not change.

So my Q - is: How do you make the above code from a one image changer to 6?

Thanks !

[haleel]

Please set unique name for every Image.
Try this code

<script>
	   function roll_over(img_name, img_src)
	   {
	   		document[img_name].src = img_src;
	   }
	</script>   

	<A HREF="some.html" onmouseover="roll_over('but1', '10.gif')"
	onmouseout="roll_over('but1', '10-roll.gif')">
	<IMG SRC="10-roll.gif" WIDTH="100" HEIGHT="50"
	NAME="but1" BORDER="0">
	</A>
	
	<A HREF="some.html" onmouseover="roll_over('but2', '1-roll.gif')"
	onmouseout="roll_over('but2', '1.gif')">
	<IMG SRC="1.gif" WIDTH="100" HEIGHT="50"
	NAME="but2" BORDER="0">
	</A>
	
	<A HREF="some.html" onmouseover="roll_over('but3', '2-roll.gif')"
	onmouseout="roll_over('but3', '2.gif')">
	<IMG SRC="2.gif" WIDTH="100" HEIGHT="50"
	NAME="but3" BORDER="0">
	</A>

[Clanstrom]

THANKKKKKKKKKKKK YOU SO MUCHHHHHHHHHHH. TOO MUCH LOVE.
Just tried it, and works.