Javascript Image Change

FinnIII · Apr 18, 2008

I have found a code that changes the background image of a page. Is it possible to adapt it to change an image on the page?

Code:

<script language="JavaScript">
<!--

// Copyright 2001 by www.CodeBelly.com
// Please do *not* remove this notice.

var backImage = new Array();

backImage[0] = "../gallery_pages/images/stupid/full-32 King Stupid Main Set.JPG";
backImage[1] = "../gallery_pages/images/stupid/full-33 King Stupid Control Desk.jpg";
backImage[2] = "../gallery_pages/images/stupid/full-34 King Stupid Main Set Rev..JPG";

function changeBGImage(whichImage){
if (document.body){
document.body.background = backImage[whichImage];
}
}

//-->
</script>

Can you help?

Thyamine · Apr 18, 2008

There are a lot of ways to change the image on a page. This is simply using javascript to refer to the document background object. You can do the same thing with an image by giving it an ID (a name), and then use Javascript to find it and change the src.

I couldn't find the right tutorial I wanted to link to, but you can certainly google it and find one that makes sense to you.

knightlie · Apr 18, 2008

Code:

var img;

img = document.getElementById('imageID');
img.src = 'http://website.com/image.jpg';

That's off the top of my head, but it's something similar. The IMG tag needs an id="imageID" for this to work:

Code:

<img id="imageID" src="image.jpg" />

You can also pre-load the new image into a variable and assign it later, but the code is slightly different. As Thyamine said there are bazillions of tutorials on the web for doing this

Thyamine · Apr 18, 2008

What Knightlie has entered is pretty much what you need.

One thing to note, case sensitivity can be important, and I have a tendency to type getElementByID (capital ID) instead of getElementById, and it always takes me forever to track down where the heck the javascript error I'm getting is from.

giulio · Apr 18, 2008

Less code:

document.getElementByID('yourimageID').src='/media/image.jpg';

Or if you're using prototype/scriptaculous, even less:

$('yourimageID').src='/media/image.jpg';

FinnIII · Apr 18, 2008

I kind of get the logic, but It isn't working for me.

In the head, I have:

Code:

<script language="JavaScript">
document.getElementByID('imageID').src='../gallery_pages/images/stupid/full-32.JPG';  
</script>

And the Body:

Code:

<img id="imageID" src="../gallery_pages/images/stupid/full-32.JPG"/>

and

Code:

<a href="javascript:'imageID'.src='../gallery_pages/images/stupid/full-33 King Stupid Control Desk.jpg'"><img src="../gallery_pages/images/stupid/thumbs15/thumb-full-33" border="0" /></a>

What needs correcting? Oh, and you have been a big help so far

Thyamine · Apr 19, 2008

getElementByID should be getElementById (lowercase d).