Change Image on Click

**NuWeb** · Apr 25, 2007 10:31

I have tried this code:

Code:

<script type="text/javascript">
function image(src, width, height) {
    var output = "<img src='" + src + "' width='" + width + "' height='" + height + "' alt=''>";
    document.write(output);
}
</script>

		<script>
			image('http://www.google.co.uk/intl/en_uk/images/logo.gif', 185, 125);
		</script>

<a href="javascript:void(0)" onclick="image('http://www.google.com/logos/mlk07.gif',185,125)">Render an image.</a>

What I'm wanting is something like this:
http://blodget.net/movies/flash/read..._example3.html

The JS above, changes the variable at fileName:variable to play a different video without reloading.
When someone clicks a hyperlink, this is what i want, but simpler just to change source of image.

Any Help Appreachiated.. Thanks!

**Raffles** · Apr 25, 2007 11:13

That is horrible javascript and far too complex. What you want to do is something like this:

HTML Code:

<img src="variableimage.gif" id="varimg" alt="">
<a href="#" id="imgchanger1">change to image1</a>
<a href="#" id="imgchanger2">change to image2</a>
<a href="#" id="imgchanger3">change to image3</a>

This would go in the <head>:

Code:

window.onload = function() {
for (var i=1;i<4;i++) {
  document.getElementById('imgchanger'+i).onclick = function() {
    document.getElementById('varimg').src = 'image'+i+'.gif';
  }
}

where the images are called image1.gif, image2.gif, etc.

**NuWeb** · Apr 25, 2007 11:46

Thanks, that works a treat.

**muazzez** · Apr 25, 2007 12:41

Code:

 
<script type="text/javascript">
var arr = [
"http://www.sitepoint.com/forums/image.php?u=91093&dateline=1167153108",
"http://www.sitepoint.com/forums/image.php?u=77732&dateline=1148384857",
"http://www.sitepoint.com/forums/image.php?u=5398&dateline=991535973"
];
var s = 0;
window.onload = function() {
var el, i = 0;
while(el = document.getElementsByName("aname")[i++]) {
el.onclick = function () {
document.getElementById('varimg').src = arr[s];
s++;
if(s == arr.length) {s = 0;}
}
}
}
</script>

<img src="http://www.sitepoint.com/forums/image.php?u=63920&dateline=1119178080" id="varimg" alt="">
<a href="#" name="aname">image 1</a>
<a href="#" name="aname">image 2</a>
<a href="#" name="aname">image 3</a>

User Tag List

Thread: Change Image on Click

Thread Tools

Display

Change Image on Click

Bookmarks

Bookmarks

Posting Permissions