questions about concatenation

[fakeName]

Hi there. Could someone please explain what is going on in the snippet of code below? I'm not posting the entire script. It works, and I understand all but the line below in the setTimeout. Why are imgArray[i] and imgOver[i] being concatenated, or are they? If so, with what?

I realize that it has something to do with the way images can be referenced by name as in document.images["someImage"], and the fact that the values of imgArray[i] and imgOver[i] are strings (the image name value and the src file name, i.e. "someimage.gif", but I still can't really understand what's happening here.

A walk through would be helpful. thanks.

fakeName


setTimeout ('document.images["'+imgArray[i]+'"].src = "'+imgOver[i].src+'";', 50);

[cyberade]

I find the best way to approach things like this is to break them up into smaller bits:

setTimeout ( 'document.images["' +imgArray[i]+ '"].src = "' +imgOver[i].src+ '";' , 50);

The items highlighted in green need to be evaluated first.
Let's say 'imgArray[i]' evaluates to 'an_image'
and 'imgOver[i]' evaluates to 'someimage.gif'
(you already know this).

The coloured text now becomes:
document.images["an_image"].src = "someimage.gif"

This means that the object referenced in your html with the id/name of 'an_image'
will be assigned the value of 'someimage.gif'.

The setTimeout delays the process by the given amount as described by Dave.

In other words, this looks like a delayed image swap.

Anyone else care to comment/contradict/correct?

[fakeName]

[i]The second argument is the countdown for a timer and, when it expires, the effect is as if the first argument is then subjected to the eval() method in order to "execute" the string. Does that answer your question?

Dave [/B]

Sort of. I looked up eval(). So, if I understand eval(), when a string is used as part of an object reference, eval () converts the string part to a corresponding object type reference. Is this right? In the example (pasted below again) how does the use of "'+ and +'" perform the same task. I still don't understand what the quotes are doing.

setTimeout ('document.images["'+imgArray[i]+'"].src = "'+imgOver[i].src+'";', 50);

thanks.

fakeName

[fakeName]

Originally posted by cyberade
I find the best way to approach things like this is to break them up into smaller bits:

setTimeout ( 'document.images["' +imgArray[i]+ '"].src = "' +imgOver[i].src+ '";' , 50);

The items highlighted in green need to be evaluated first.
Let's say 'imgArray[i]' evaluates to 'an_image'
and 'imgOver[i]' evaluates to 'someimage.gif'
(you already know this).

The coloured text now becomes:
document.images["an_image"].src = "someimage.gif"

This means that the object referenced in your html with the id/name of 'an_image'
will be assigned the value of 'someimage.gif'.

The setTimeout delays the process by the given amount as described by Dave.

In other words, this looks like a delayed image swap.

Anyone else care to comment/contradict/correct?

Thanks Cyberade. I'm getting close here. I understand the end result of:

["'+imgArray[i]+'"]

that is to say I know that it is taking the img name stored in the imgArray and setting its source to the same as imgOver[i].src, but I don't understand what all the quotes are about. I can deduce that this is some sort of concatenation, but I really don't see what the "'+ and +'" are doing to the string at i in imgArray. I see that the double quotes would wrap around the img name, as you said, like
document.images["image_name"]

but what about '+ and +' ?

[fakeName]

Thanks to both of you. Got it now.

fakeName