Array, innerHTML, has me stumped :/ please help

JavaScript
1

Hello I can’t figure out it’s not inserting the image into the image tag. Seems like everything is there to me. Its just supposed to throw the image, into the image tag. I really need to do it this way so that I only need to add the image addresses to the arry only to same me time. Please help!! Thank you very much for your help. :rolleyes:

var arr=;
arr[0] = [“http://l.yimg.com/g/images/watch-the-world_galleries.jpg”];
arr[1] = [“”];
arr[2] = [“”];
arr[3] = [“”];
arr[4] = [“http://l.yimg.com/g/images/watch-the-world_commons.jpg”];
arr[5] = [“”];
arr[6] = [“”];
arr[7] = [“”];
arr[8] = [“”];
arr[9] = [“”];
arr[10] = [“”];
arr[11] = [“”];
arr[12] = [“”];
arr[13] = [“”];
arr[14] = [“”];
arr[15] = [“”];
arr[16] = [“”];
arr[17] = [“”];
arr[18] = [“”];
arr[19] = [“”];
arr[20] = [“”];
arr[21] = [“”];
arr[22] = [“”];
arr[23] = [“”];
arr[24] = [“”];
arr[25] = [“”];
arr[26] = [“”];
arr[27] = [“”];
arr[28] = [“”];
arr[29] = [“”];
arr[30] = [“”];
arr[31] = [“”];
arr[32] = [“”];
arr[33] = [“”];
arr[34] = [“”];
arr[35] = [“”];
arr[36] = [“”];
arr[37] = [“”];
arr[38] = [“”];
arr[39] = [“”];
arr[40] = [“”];
arr[41] = [“”];
arr[42] = [“”];
arr[43] = [“”];
arr[44] = [“”];
arr[45] = [“”];
arr[46] = [“”];
arr[47] = [“”];
arr[48] = [“”];
arr[49] = [“”];
arr[50] = [“”];
arr[51] = [“”];
arr[52] = [“”];
arr[53] = [“”];
arr[54] = [“”];
arr[55] = [“”];
arr[56] = [“”];
arr[57] = [“”];
arr[58] = [“”];
arr[59] = [“”];

function decimg(){
document.getElementById(“arr”).innerHTML = “<img style=‘margin-left: 10px;margin-top:10px’ title=‘Image’ border=‘0’ src=”‘+arr[new Date().getSeconds()]+’”>”;
setTimeout(‘decimg()’,1001);}

This goes in the body of a page
<div id=“arr”>
<script type=“text/javascript”>decimg()</script>
</div>

2

I’m not sure what you want to do from your code.

Do you want to change the image every second?

3

if yes,

try something similar to this

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
 
var imgPaths = ['pic1.jpg','pic2.jpg','pic3.jpg','pic4.jpg','pic5.jpg',
'pic1.jpg','pic2.jpg','pic3.jpg','pic4.jpg','pic5.jpg',
'pic1.jpg','pic2.jpg','pic3.jpg','pic4.jpg','pic5.jpg',
'pic1.jpg','pic2.jpg','pic3.jpg','pic4.jpg','pic5.jpg',
'pic1.jpg','pic2.jpg','pic3.jpg','pic4.jpg','pic5.jpg',
'pic1.jpg','pic2.jpg','pic3.jpg','pic4.jpg','pic5.jpg',
'pic1.jpg','pic2.jpg','pic3.jpg','pic4.jpg','pic5.jpg',
'pic1.jpg','pic2.jpg','pic3.jpg','pic4.jpg','pic5.jpg',
'pic1.jpg','pic2.jpg','pic3.jpg','pic4.jpg','pic5.jpg',
'pic1.jpg','pic2.jpg','pic3.jpg','pic4.jpg','pic5.jpg',
'pic1.jpg','pic2.jpg','pic3.jpg','pic4.jpg','pic5.jpg',
'pic1.jpg','pic2.jpg','pic3.jpg','pic4.jpg','pic5.jpg'
];
 
var imgO = new Array();
//preload the images for faster swapping later on
for(var i=0; i < imgPaths.length; i++) {
    imgO[i] = new Image();
    imgO[i].src = imgPaths[i];
}
 
function swapImage() {
    var currDate = new Date();
    var imgIndex = currDate.getSeconds();
    imgE.src = imgO[imgIndex].src;
    setTimeout('swapImage()',1005);  //this calls swapImage() every 1005 milliseconds
}
 
window.onload=function() {
    imgE = document.getElementById("imgMyImage");
    swapImage();
}
</script>
</head>
<body>
 
<div>
       <img id="imgMyImage" src="" alt="" />
</div>
 
</body>
</html>
4

Thanks a lot, I said right off the start I didn’t want my whole code changed though. Yes I have it set to change every second in the timeout for this item. Using my code, I’m just trying to have the code put the image address in the array lines, into the image tag by the innerHTML, down below. So that the image rotating every second is put in here to rotate every second: <img src=”‘+arr[new Date().getSeconds()]+’”>
So that the image addresses up above in array lines rotates through that every second down below. Someone that knows a lot about javascript said that should work. It just isn’t yet and I don’t know why. I’m not getting any error messages at all in the error consoles either. Please help me. I just need help getting over that very last part. I haven’t been back to the forum for many months and needed help with that for my web site. Thanks a lot :).

do I need just one more step instead?
getimage= arr[new Date().getSeconds()];
document.getElementById(“arr”).innerHTML = “<img src=”getimage”>”;

But that’s not working either when it seems like it should be. Maybe I need square brackets instead of quotation marks, anyway why I need help with just that last part.

5

ok, sorry but it’s still not clear to me what you are trying to do :frowning:

This sentence does not make sense to me.

Using my code, I’m just trying to have the code put the image address in the array lines, into the image tag by the innerHTML, down below.

Are you trying to get the code to assign the 60 image paths to the values of your array called arr?

If so, where are the image paths coming from and after what event will the image paths be added to arr?

6

var arr=;
arr[0] = [“http://l.yimg.com/g/images/watch-the-world_galleries.jpg”];
arr[1] = [“”];
arr[2] = [“”];
arr[3] = [“”];
arr[4] = [“http://l.yimg.com/g/images/watch-the-world_commons.jpg”];
arr[5] = [“”];
arr[6] = [“”];
arr[7] = [“”];
arr[8] = [“”];
arr[9] = [“”];
arr[10] = [“”];
arr[11] = [“”];
arr[12] = [“”];
arr[13] = [“”];
arr[14] = [“”];
arr[15] = [“”];
arr[16] = [“”];
arr[17] = [“”];
arr[18] = [“”];
arr[19] = [“”];
arr[20] = [“”];
arr[21] = [“”];
arr[22] = [“”];
arr[23] = [“”];
arr[24] = [“”];
arr[25] = [“”];
arr[26] = [“”];
arr[27] = [“”];
arr[28] = [“”];
arr[29] = [“”];
arr[30] = [“”];
arr[31] = [“”];
arr[32] = [“”];
arr[33] = [“”];
arr[34] = [“”];
arr[35] = [“”];
arr[36] = [“”];
arr[37] = [“”];
arr[38] = [“”];
arr[39] = [“”];
arr[40] = [“”];
arr[41] = [“”];
arr[42] = [“”];
arr[43] = [“”];
arr[44] = [“”];
arr[45] = [“”];
arr[46] = [“”];
arr[47] = [“”];
arr[48] = [“”];
arr[49] = [“”];
arr[50] = [“”];
arr[51] = [“”];
arr[52] = [“”];
arr[53] = [“”];
arr[54] = [“”];
arr[55] = [“”];
arr[56] = [“”];
arr[57] = [“”];
arr[58] = [“”];
arr[59] = [“”];

function decimg(){
document.getElementById(“arr”).innerHTML = “<img src=”‘+arr[new Date().getSeconds()]+’”>”;
setTimeout(‘decimg()’,1001);}

Thank you very much. Yes the array lines are called arr and I need them numbered like that.

The only thing that goes in the array lines are image addresses only.

I have the innerHTML down below decorated with xhtml how I want. The images addresses from array lines get pulled into that with <img src=”‘+arr[new Date().getSeconds()]+’”>

Or something else real easy added. Like:
getimage= arr[new Date().getSeconds()];
document.getElementById(“arr”).innerHTML = “<img src=”getimage”>”;
or something else.

This way I only have to decorate my images in one place in the innerHTML. It is a lot faster for me that way so that all I have to add to array lines are addresses to different images only.

Someone that knows a lot about javascript said this will work easy like this with innerHTML, I just can’t remember his name to ask him on the very last part.

If you look at the array it shows I’m putting images addresses in array only, I’m just trying rotate those through the innerHTML down below, so that I only have to decorate all the images how I want, in one place only.

7

you have 2 image paths in arr.

what I don’t understand is where are the other 58 image paths and how do you want them added to arr?

rotating the images is the easy part. how to populate the arr array with the 58 “missing” image paths is what I still don’t get

8

Oh LOLOL. People don’t usually put 58 more images in there just to show people an example. But when it’s working there will be 58 images in there for it to rotate. That would take me days to fill up with images to find somewhere. Let me know if you need them in there for some kind of testing anyway, and I’ll just add each of those two to every other line, you can have me test though if you want and I’ll let you know what happens when anyone tells me how to fix that. Thanks for letting me know honestly why it wasn’t making sense. And thank you very much hope you can help me or someone else with that part, the very last I’m stuck on.

9

ok, I think I understand a bit better now

I am working on the assumption that you just want to rotate images through a single <img> at 1 sec intervals.

With this code,

  1. you can put as many images as you like in the imgPaths array. For demo purposes I have put in 5 but you can put in 60 or whatever and the code automatically gets how many images you have in the array.

  2. on page load, a random image is selected as the first image to display and then the remaining images are continuosly looped sequentially at 1 second intervals.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
 
var imgPaths = ['pic1.jpg','pic2.jpg','pic3.jpg','pic4.jpg','pic5.jpg'];
 
var imgO = new Array();

//preload the images for faster swapping later on
for(var i=0; i < imgPaths.length; i++) {
    imgO[i] = new Image();
    imgO[i].src = imgPaths[i];
}
 
//select a random pic index  to display
var currPic = Math.floor(Math.random()*imgPaths.length);
 
function swapImage() {
    imgE.src = imgO[currPic].src;
    //increment currPic
    if(++currPic > imgPaths.length-1) {
        currPic = 0;
    }
    setTimeout('swapImage()',1000);  //this calls swapImage() every 1000 milliseconds
}
 
window.onload=function() {
    imgE = document.getElementById("imgMyImage");
    swapImage();
}

</script>
</head>
<body>
 
<div>
       <img id="imgMyImage" src="" alt="" />
</div>
 
</body>
</html>
10

Your help is most highly appreciated. Why do people keep writing me all new code though? I’m not doing anything random, it’s pulling the next array line in order per second. The seconds is what makes it pull the next array line per second. So after it pulled one per second, it’s already going to the next one per second. new Date().getSeconds() it is supposed to be doing that too. Said at the start I just need that last part people have told me would be easy fixed. I’ll even pay you 5.00 just to fix my real easy last part or a little more if takes more than that. Because I like using my other one it’s a lot easier for me to use because I understand how most of it works and I need numbered array lines. Also so that if I need to fix something more with it someday it’s easy for me to fix. If I have to fix something with someone else’s will be too hard for me to fix. That is why I’m trying to figure out what just is wrong with the one I wrote. Can you or someone please tell me why what I’m trying to do will not work the way it is? Because it is supposed to with some mild adustment to the bottom. Please let me know thank you very much.

11

Why do people keep writing me all new code though?

Maybe because the way you are trying to do it is really unusual.

If you don’t want to use the same syntax as I do to create the imgPaths array, then you can use your syntax. Both are just as valid. My way is just the way I am used to doing it.

If you don’t want to start with a random index, you can just leave out that code and start with index 0 on each page load.

I don’t know why you are “complicating” things by using the Date object and its getSeconds() method to change the index.

Imho simply using a counter (like currPic) and incrementing it by 1 every second is much simpler.

Also, to be honest, in situations like this it is far quicker for me to write my own code to do what an OP needs than to spend time debugging someone else’s code.

To debug you actual code, I would just insert alert() statements at different points in your code to check values of any variables at that point until you find the cause of your problem.

The bottom line is that my code appears to do what you want. Maybe you can use the logic I used in my code, as a demo, to find and fix the problem in your code.

12

Thanks for telling me what you think defnitely. :slight_smile: That helps. I think I found part of the problem. I put ‘arr’ in here document.getElementById(“arr”), and that might have been messing things up since I had it in the innerHTML also.

Let me explain it outside in, maybe that will help someone.

The following works:

This goes in the body of a page

<div id=“arr”>
<script type=“text/javascript”>decimg()</script>
</div>

var arr=;
arr[0] = [“<div style=‘height:100px; background-color: rgb(153, 0, 0);’><img style=‘margin-top:10px’ border=‘0’ src=src=‘http://l.yimg.com/g/images/watch-the-world_galleries.jpg’ /></div>”];
arr[1] = [“”];
arr[2] = [“”];
arr[3] = [“”];
arr[4] = [“”];
arr[5] = [“”];
arr[6] = [“”];
arr[7] = [“”];
arr[8] = [“”];
arr[9] = [“”];
arr[10] = [“”];
arr[11] = [“”];
arr[12] = [“”];
arr[13] = [“”];
arr[14] = [“”];
arr[15] = [“”];
arr[16] = [“”];
arr[17] = [“”];
arr[18] = [“”];
arr[19] = [“”];
arr[20] = [“”];
arr[21] = [“”];
arr[22] = [“”];
arr[23] = [“”];
arr[24] = [“”];
arr[25] = [“”];
arr[26] = [“”];
arr[27] = [“”];
arr[28] = [“”];
arr[29] = [“”];
arr[30] = [“”];
arr[31] = [“”];
arr[32] = [“”];
arr[33] = [“”];
arr[34] = [“”];
arr[35] = [“”];
arr[36] = [“”];
arr[37] = [“”];
arr[38] = [“”];
arr[39] = [“”];
arr[40] = [“”];
arr[41] = [“”];
arr[42] = [“”];
arr[43] = [“”];
arr[44] = [“”];
arr[45] = [“”];
arr[46] = [“”];
arr[47] = [“”];
arr[48] = [“”];
arr[49] = [“”];
arr[50] = [“”];
arr[51] = [“”];
arr[52] = [“”];
arr[53] = [“”];
arr[54] = [“”];
arr[55] = [“”];
arr[56] = [“”];
arr[57] = [“”];
arr[58] = [“”];
arr[59] = [“”];

function decimg(){
document.getElementById(“arr”).innerHTML = arr[new Date().getSeconds()];
setTimeout(‘decimg()’,1000);}

All that works, it puts all inside the div into my web page.

13

See my last post.

But I don’t want to decorate things in each array line it takes me too long. I want the decoration at one place at the bottom and only want to add the image addresses in the array instead. I only want addresses in the array instead. Save me a lot more time.

The reason I was using seconds, is I need them to change every second on the clock. Not by increments. For what I’m doing it does matter that it’s every second of the clock.

So I’m just trying to have one decoration at the bottom, trying to make it a whole lot easier. It would be nice to have it at the bottom of the script, instead of putting one decoration in the web page and throwing the rotating array images into that.

this part here seems to be fouling that up. document.getElementById(“arr”).innerHTML
because it’s asking for the array lines there too.

Here’s where I’m at again.

This goes in the body of a page

<div id=“arr”>
<script type=“text/javascript”>decimg()</script>
</div>

var arr=;
arr[0] = [“http://l.yimg.com/g/images/watch-the-world_galleries.jpg”];
arr[1] = [“”];
arr[2] = [“”];
arr[3] = [“”];
arr[4] = [“http://l.yimg.com/g/images/watch-the-world_commons.jpg”];
arr[5] = [“”];
arr[6] = [“”];
arr[7] = [“”];
arr[8] = [“”];
arr[9] = [“”];
arr[10] = [“”];
arr[11] = [“”];
arr[12] = [“”];
arr[13] = [“”];
arr[14] = [“”];
arr[15] = [“”];
arr[16] = [“”];
arr[17] = [“”];
arr[18] = [“”];
arr[19] = [“”];
arr[20] = [“”];
arr[21] = [“”];
arr[22] = [“”];
arr[23] = [“”];
arr[24] = [“”];
arr[25] = [“”];
arr[26] = [“”];
arr[27] = [“”];
arr[28] = [“”];
arr[29] = [“”];
arr[30] = [“”];
arr[31] = [“”];
arr[32] = [“”];
arr[33] = [“”];
arr[34] = [“”];
arr[35] = [“”];
arr[36] = [“”];
arr[37] = [“”];
arr[38] = [“”];
arr[39] = [“”];
arr[40] = [“”];
arr[41] = [“”];
arr[42] = [“”];
arr[43] = [“”];
arr[44] = [“”];
arr[45] = [“”];
arr[46] = [“”];
arr[47] = [“”];
arr[48] = [“”];
arr[49] = [“”];
arr[50] = [“”];
arr[51] = [“”];
arr[52] = [“”];
arr[53] = [“”];
arr[54] = [“”];
arr[55] = [“”];
arr[56] = [“”];
arr[57] = [“”];
arr[58] = [“”];
arr[59] = [“”];

//Is the only option putting decoration in one place in the web page, instead of in a script, and putting the rotating images into that decoration in the web page instead like you did?
How to put the decoration here instead, explained in last post also. For the script to put it in the web page after that.
function decimg(){
document.getElementById(“arr”).innerHTML = “<div style=‘background-color: rgb(153, 0, 0);’><img style=‘margin-top:10px’ src=”‘+arr[new Date().getSeconds()]+’” /></div>”;
setTimeout(‘decimg()’,1001);}

Is it that it cannot? Are image tags not allowed to be moved to another location using innerHTML?
If not, are image tags allowed to be moved in something else in javascript other than innerHTML?

14

ok, I can see why you want to use the Date object to swap the images - that’s no probelm :slight_smile:

but now I am stumped again.

now it appears English is not your native language, and I certainly don’t hold that against you, but I think that is why I am having problems understanding this bit of your post

But I don’t want to decorate things in each array line it takes me too long. I want the decoration at one place at the bottom and only want to add the image addresses in the array instead. I only want addresses in the array instead. Save me a lot more time.

I can’t figure out what you mean by “decorate” as it is not a normal term I am used to hearing or using when talking about javascript so this is where I am getting bogged down trying to work out what you want.

I’m trying to guess what you really mean but am unable to do so.

Can you please try to explain the above sentences using maybe other words.

15

Lol yes but I’m english. I know what I want in my head but explaining it is another matter. It would be a lot easier if people could read each other’s minds or would it? Thank you very much for just asking me to explain something better. For example it works fine with flash, don’t know why it doesn’t work with images. This does rotate fine with flash instead. What I was doing before does rotate flash fine so I couldn’t figure out why it didn’t work with image tags too.

function decimg(){
document.getElementById(“arr”).innerHTML = “<embed src=”‘+arr[new Date().getSeconds()]+’" ></embed></object>";
setTimeout(‘decimg()’,1001);}

16

What I meant by decorating. I wasn’t talking about javascript at all. If you looks at my third post ago.

The script there rotates web page decoration into my web page. xhtml or html it rotates decoration into my web page. For example: The post 3 ago rotates things like these in the array lines into my web page. <div style=‘height:100px; background-color: rgb(153, 0, 0);’><img style=‘margin-top:10px’ border=‘0’ src=src=‘http://l.yimg.com/g/images/watch-the-world_galleries.jpg’ /></div> The whole thing I posted 3 ago does rotate web page decoration into my web page.

But I said the whole thing of what I’m trying to do with what I asked at the beginning and posted last. I don’t want to decorate in each and every array line like the one does 3 ago. I only want one html decoration that is set. One decoration that is always set the same. That is what I am trying to do in the script I posted most of the time and I posted the last time.

I want the page decoration in one spot in the script only. Then the array to add the image address to the decoration. Like with the flash example last post, all this works with flash.

Maybe <image tags cannot be moved with innerHTML? Even though flash can?

17

This does work, it works with flash.

var arr=;
arr[0] = [“/flash1.swf”];
etc.

function decimg(){
document.getElementById(“arr”).innerHTML = “<embed src=”‘+arr[new Date().getSeconds()]+’" ></embed></object>";
setTimeout(‘decimg()’,1001);}

So why doesn’t this work when there is an <img tag in it instead when it works with flash, and is there anything that will move an image tag? Other than my 4th ago that does. Why doesn’t innerHTML move image tags when it works with flash, and is there any javascript that does?

var arr=;
arr[0] = [“http://l.yimg.com/g/images/watch-the-world_galleries.jpg”];
arr[1] = [“”];
arr[2] = [“”];
arr[3] = [“”];
arr[4] = [“http://l.yimg.com/g/images/watch-the-world_commons.jpg”];
arr[5] = [“”];
arr[6] = [“”];
arr[7] = [“”];
arr[8] = [“”];
arr[9] = [“”];
arr[10] = [“”];
arr[11] = [“”];
arr[12] = [“”];
arr[13] = [“”];
arr[14] = [“”];
arr[15] = [“”];
arr[16] = [“”];
arr[17] = [“”];
arr[18] = [“”];
arr[19] = [“”];
arr[20] = [“”];
arr[21] = [“”];
arr[22] = [“”];
arr[23] = [“”];
arr[24] = [“”];
arr[25] = [“”];
arr[26] = [“”];
arr[27] = [“”];
arr[28] = [“”];
arr[29] = [“”];
arr[30] = [“”];
arr[31] = [“”];
arr[32] = [“”];
arr[33] = [“”];
arr[34] = [“”];
arr[35] = [“”];
arr[36] = [“”];
arr[37] = [“”];
arr[38] = [“”];
arr[39] = [“”];
arr[40] = [“”];
arr[41] = [“”];
arr[42] = [“”];
arr[43] = [“”];
arr[44] = [“”];
arr[45] = [“”];
arr[46] = [“”];
arr[47] = [“”];
arr[48] = [“”];
arr[49] = [“”];
arr[50] = [“”];
arr[51] = [“”];
arr[52] = [“”];
arr[53] = [“”];
arr[54] = [“”];
arr[55] = [“”];
arr[56] = [“”];
arr[57] = [“”];
arr[58] = [“”];
arr[59] = [“”];

function decimg(){
document.getElementById(“arr”).innerHTML = “<div style=‘background-color: rgb(153, 0, 0);’><img style=‘margin-top:10px’ src=”‘+arr[new Date().getSeconds()]+’” /></div>”;
setTimeout(‘decimg()’,1001);}

What I’m trying to do, add the image addresses in array into this, just like it does work with flash.
Note: This script does work in that it does show this set decoration on the page.

It however does not rotate the images in array into this example <div decoration yet, and is what I’m trying to do. You can see in the just above html I have an image tag in it. It is not rotating the image addresses into that yet, like it does work with flash.

Like this does work and rotates .swf addresses fine.

var arr=;
arr[0] = [“/flash1.swf”];
etc.

function decimg(){
document.getElementById(“arr”).innerHTML = “<embed src=”‘+arr[new Date().getSeconds()]+’" ></embed></object>";
setTimeout(‘decimg()’,1001);}

Please let me know if innerHTML has a problem with image tags, and if there is any other javascript that moves image tags with decoration.

Thank you very much for your help.

18

ok I’ve gone back to my original code which uses the Date object to swap the images.

I have only 5 images in my array and so when the seconds is > 4 the image won’t swap until the next minute ticks over and seconds is 0 again. But you can use just a few images and repeat them to fill up the array to 60 elements.

This works

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
 
var imgPaths = ['pic1.jpg','pic2.jpg','pic3.jpg','pic4.jpg','pic5.jpg'];
var imgO = new Array();

//preload the images for faster swapping later on
for(var i=0; i < imgPaths.length; i++) {
    imgO[i] = new Image();
    imgO[i].src = imgPaths[i];
}
 
function swapImage() {
    var currDate = new Date();
    var imgIndex = currDate.getSeconds();
    if(imgIndex < imgPaths.length) {
     imgE.src = imgO[imgIndex].src;
    }
    setTimeout('swapImage()',1000);  //this calls swapImage() every 1005 milliseconds
}
 
window.onload=function() {
    imgE = document.getElementById("imgMyImage");
    swapImage();
}
</script>
</head>
<body>
 
<div>
       <img id="imgMyImage" src="" alt="" />
</div>
 
</body>
</html>

if when the page loads and the first seconds is > 4 which is likely, you will have to wai until the next minute ticks over before the 5 images begin to cycle.

but just fill up the array with 60 images, even if they are repeat in other elements for testing purposes

19

It seems odd that you’re using <embed> to show an image, instead of using the more standard <img> tag, but let it be so.

The array of images, where there’s only a couple of them, you can easily set up with less effort.

Where there are only a couple of images you can use:


var arr = [];
arr[0] = "http://l.yimg.com/g/images/watch-the-world_galleries.jpg";
arr[4] = "http://l.yimg.com/g/images/watch-the-world_commons.jpg";

And where there are even more images, you can use:


var arr = [
    "http://l.yimg.com/g/images/watch-the-world_galleries.jpg",
    "...",
    "...",
    "...",
    "http://l.yimg.com/g/images/watch-the-world_commons.jpg"
];

Another way of doing this where there are only a few items, is with an object:


var arr = {
    0: "http://l.yimg.com/g/images/watch-the-world_galleries.jpg",
    4: "http://l.yimg.com/g/images/watch-the-world_commons.jpg"
};

It is not required for you to explicitly assign a value to all 60 array items. Any index values that don’t exist will return undefined, so you can use the default operator to provide a default value instead.


image = arr[index] || "";

When setting timeouts and intervals, you need to be aware that web browsers are NOT guaranteed to trigger your function at the time you specify. The only guarantee is that it will not occur before your specified delay.

If you’re wanting run a function every second, it’s better to use setInterval instead.

It’s also not appropriate to use a string value to specify the function. You should normally give the timeout/interval a reference to the function instead.

Lastly, why 1001? 1000 is more where you want something happening every second.


setInterval(decimg, 1000);

All of the information above is provided with the aim of making your code less fragile.

Let’s see how this affects your function:


var arr = [];
arr[0] = "http://l.yimg.com/g/images/watch-the-world_galleries.jpg";
arr[4] = "http://l.yimg.com/g/images/watch-the-world_commons.jpg";

function decimg() {
    var el = document.getElementById("arr"),
        index = new Date().getSeconds(),
        src = arr[index] || "";
    el.innerHTML = '<embed src="' + src + '"></embed>';
}
setInterval(decimg, 1000);
20

Thanks you swell guys for everything. I just threw it in a set decorated <img tag in the web page. :}
I’m trying to get some of my web page scripts fixed that weren’t working well for me.