Question

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:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

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

And for the body
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

<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 !

Answer 1

Ok I figured it out. Should set a unique name for every Image.
Try this code
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

<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>

hope this works