Javascript - Array of Images, How to?

MooShop · 11-07-2014 11:13AM #1

Hi,

I'm very new to this so please excuse any amateurish mistakes!

So I have a basic HTML page and this is a snippet from it. All this section does is display an image.

[HTML]<section>
<img src="image.jpg" id="displayImage">
</section>[/HTML]

I want to create an array of images, so I can change the image on the HTML page by referring to the array. I have just created one item so far for test purposes.

var arrayOfImages = [];
arrayOfImages[0] = new Image();
arrayOfImages[0].src = "image1.jpg";

So, as far as I'm aware the above should all be ok. What I really want to know is how to change the image in the HTML. I have been looking around and have tried a few things to no avail.

This is a sample of the code I've tried but it doesn't work. I'm not sure if this really makes that much sense.

document.getElementById("displayImage").src = arrayOfImages[0].src;

As I said I'm new to this so any guidance would be greatly appreciated.

Synode · 11-07-2014 12:36PM

Use a recursive function. Here's some code I used for a project a few years ago:

var ImageArr1 = new Array("Trophy.jpg","NZChamp.jpg","IrlAus.jpg","IrlAus.jpg","Statdium.jpg");
  
  function RotateImages(Start)
  {
  	var a = "ImageArr1";
  	var b = document.getElementById('Rotating1');
  	if(Start>=5)
  		Start=0;
  	b.src = "RotatingImages/" + ImageArr1[Start];
  	window.setTimeout("RotateImages("+(Start+1)+")",5000);
  }

Here's the code from the HTML page

<div class="imageBox">

	<h3>Image Gallery</h3>

	<img src="RotatingImages/Trophy.jpg" id="Rotating1" alt="Image Gallery" />

	<script type="text/javascript">
		RotateImages(0);
	</script>
</div>

MooShop · 11-07-2014 01:17PM

Ah, I see. I was trying to create an array with the images in each location. Looking at yours, you just use the image names at each location. I tried this and tweaked my earlier code and it's working now. Thanks a million!

Javascript - Array of Images, How to?

Comments