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

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

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

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

Collectives™ on Stack Overflow

JavaScript Image changing error

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related