AJAX image replace

Chardee MacDennis · 04-12-2008 1:53pm #1

trying to replace an image using onclick and js, i am currently using this:

document.images[id].src = 'images/voted.png';

inside a function called by this:

<a href='#n' onclick='addKarma(1,0,28,TIP3)'><img src='images/notvoted.png' id='TIP3'></a>

while the rest of the function is carrying out its task, it wont update the image, anyone know where i am going wrong?

vodkadub · 04-12-2008 2:02pm

Maybe try something like this;

<script language="javascript">

function changeImg(){
document.getElementById("image").src="replaceimage.jpg";
}

</script>

<a href="" onClick="changeImg()"><img src="oldimage.jpg" id="image"></a>

Chardee MacDennis · 04-12-2008 3:15pm

vodkadub wrote: »

Maybe try something like this;

<script language="javascript">

function changeImg(){
document.getElementById("image").src="replaceimage.jpg";
}

</script>

<a href="" onClick="changeImg()"><img src="oldimage.jpg" id="image"></a>

well it has to be part of the larger function, i changed it from

document.images[id].src = 'images/voted.png';

to

document.getElementById(id).src='images/voted.png';

but no luck...

Duckjob · 04-12-2008 4:12pm

Try adding a

document.recalc(true);

after you update the image

Chardee MacDennis · 04-12-2008 9:41pm

Duckjob wrote: »

Try adding a

after you update the image

nope no good, does it make a difference if the js is in an external file?

Duckjob · 05-12-2008 3:37pm

This code works so you might be able to compare it with yours:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>

<script language="javascript" type="text/javascript">

function changeimage(sImageName) {
document.getElementById(sImageName).src = "images/2.png";
}
</script>
</head>
<body>

<a href="#" onclick="changeimage('img1');"><img id="img1" src="images/1.png" alt="" /></a>

</body>
</html>

AJAX image replace

Comments