JavaScript Image changing error

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 !

Blender · Accepted Answer · 2011-11-28 04:00:04Z

2

Try using an id for each image (id must be unique, so there should be no elements with the same id):

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

And this code:

function roll_over(img_id, img_src) {
  document.getElementById(img_id).src = img_src;
}

edited Nov 28, 2011 at 4:00

answered Nov 28, 2011 at 3:50

Blender

300k55 gold badges462 silver badges511 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Naeem Ul Wahhab · Accepted Answer · 2011-12-08 15:40:26Z

1

+150

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

edited Dec 8, 2011 at 15:40

answered Nov 28, 2011 at 3:48

Naeem Ul Wahhab

2,4974 gold badges35 silver badges61 bronze badges

Collectives™ on Stack Overflow

JavaScript Image changing error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related