Need Help Cresting Java Script to change Image Source

[King_Jay16]

I need help creating a javascript that will change the source for an image using the following

<img id="wrench" src="spanners.jpg"
alt=".." width=".." height= ".." />


document.getElementById("wrench").src=
"monkey_wrench.jpg";

The java script would run when i click a button that is tied to a specific picture and display that photo by change the source information.

However I have tried a couple things but nothing seems to work... Can someone at least point me in the right direction.

[Krems]

try using single quotes

[kknight]

Just a silly question.....Why would you want to change the image source?

[Arch_Angel]

Just a silly question.....Why would you want to change the image source?

Click a link and a picture on the page changes.
Click a picture and another picture appears (like a photo slide).
Click a link and a picture appears.
Mouse over a link and a picture changes.

So many reasons.

[Wallizzle]

wouldn't this requires ajax... Since the page not reloading.

[datdread]

wouldn't this requires ajax... Since the page not reloading.

Not necessarily.

I think you can use the

onclick="callAFunction(this)"

in your image tag and have that function update the img src....

edit:

Don't forget to preload your images.

[sumo]

First I'd recommend that you use jQuery or Sizzle for selecting because in production that's what you'll be using anyway. If you're using jQuery swapping the src is dead simple:

$('#link-selector').click(function(e){
e.preventDefault();
$('#wrench').attr('src', 'monkey_wrench.jpg');
});

[ramesh]

Can you assign the src= to a variable and then assign the variable to another image using the onClick method?

[datdread]

Can you assign the src= to a variable and then assign the variable to another image using the onClick method?

Nods. I believe so.

get
var imgsrc = document.getElementById("myImg").src;


set
document.getElementById("myOtherImg").src = imgsrc;


...or something like that.

[Wallizzle]

Not necessarily.

I think you can use the

onclick="callAFunction(this)"

in your image tag and have that function update the img src....

edit:

Don't forget to preload your images.

Ahhh, there we go... I know something like this was required... versus just calling images randomly, you gotta put them in memory first.