Image swap with Javascript, using event onclick

Heartless_King · 12 Jun 2006 at 23:18

Ok need a javascript guru to help me out.

At the moment I have some stuff happening when a user click on an image using the event onclick.

Basically I've given an image an ID say "1". I would like someone to give me the code in which I can change the src for an image using it's ID.

Regards,
King

Heartless_King · 12 Jun 2006 at 23:27

I'm not looking to swap the background picture of a cell or anything, as the image is the thing I will be clicking on to cause the "onclick" event.

Anyone else?

Cheers,
King

Heartless_King · 13 Jun 2006 at 00:30

PsychoDuck said:

Try this, probably can be done a better way:-

Code:

<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<link rel="stylesheet" type="text/css" href="mystyle.css"/>
</head>

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

function swapimage(id, newimage)
{
	var image = document.getElementById(id);
	image.src = newimage;
}

//-->
</script>

<body>

<img src='ie.jpg' id='image'></img>

<a href=# onclick="javascript:swapimage('image', 'firefox.jpg')">Test</a>

</body>

</html>

Ill give it a try

Heartless_King · 13 Jun 2006 at 15:22

Just wanted to say thanks, the code for the a link work fine and is now implemented fine into my page

Heartless_King · 13 Jun 2006 at 16:51

Only problem is that the href="#" causes the page to move to the top after the onclick event.

Is there anything else I can put in href to stop the page re-loading at the top, but still making the image as a link?

Thanks,
King

Heartless_King · 14 Jun 2006 at 15:29

Think I may have better solution by using the "javascript: void(0)".

The void stops the page reloading and works fine

Thanks guys for your help,
King