Switch image by variable?

[JesseSF]

Hello,

I'm writing an image gallery script in which the thumbnail for the currently-viewed image is indicated with a smaller image below the thumbnail. My placeholder is as follows:

<img name="indicator0" alt="indicator>

with indicator1, indicator2, etc. following, one below each thumbnail. In my script, which placeholder has the indicator is called by the variable thumbIndicator. I'd like to be able to do that like this:

document.(thumbIndicator).src = "indicator_image.jpg";

but this has not worked. I've also changed my image placeholder to this:

<img id="indicator0" alt="indicator">

and the script to this:

document.getElementByID(thumbIndicator).src = "indicator_image.jpg";

but that hasn't worked either.

I have been designing websites for a while now, have a fair amount of experience with PHP/MySQL, but am new to javascript. Any help is greatly appreciated.

[DanInMA]

corrections are in red

<img name="indicator0" alt="indicator>

document.(thumbIndicator).src = "indicator_image.jpg";
document.indicator0.src = "indicator_image.jpg"; = targets an element with a name of indicator0

but this has not worked. I've also changed my image placeholder to this:

<img id="indicator0" alt="indicator">

and the script to this:

document.getElementByID(thumbIndicator).src = "indicator_image.jpg";
document.getElementByID(Indicator0).src = "indicator_image.jpg"; this targets an element with an ID of indicator0

[JesseSF]

Thanks, DanInMA.

What I'm trying to do is have the image appear in a different placeholder (each with a different ID) depending on which conditions are met. Because of this, I'm want the target to be indicated by a variable, not by specific element ID or name.

It sounds like this might not be possible?

[DanInMA]

possible? probably. I am what you would call intermediate and still have a lot to learn.

I'm sure you could do it but what method you use would most likely depend upon the code you have preceding the action you want to accomplish. The answer as to how you go about this could be many different answers but without seeing more of your code I could only make basic guesses. Perhaps one of the vets can address your question

[JesseSF]

Here is my code. The variable 'ImgCount' contains the number of items in the array that contains my image names.

function moveIndicator(i) {
var namePref = "indicator";
var counter = 0;
for (counter=0;counter<=ImgCount; counter++) {
if (i == counter) {
var indicatorNumber = i.toString();
var name = namePref + indicatorNumber;
document.(name).src = "images/link_flower.jpg";
}else{
var blankNumber = counter.toString();
var name= namePref + blankNumber;
document.(name).src = "images.blank.jpg";
}
}

[WolfShade]

I assume that ImgCount is being globally declared in another function?

[DanInMA]

you still do not need the parenthesis to my knowledge. have you tried it this way? ( I took the small liberty of also changing name to name1. It's generally considered a bad idea to use reserved word for variables)

Also, how are you adding the IMG elements to the page? this function shoudl change the source of the elements with the corresponding names, so I assume you are using another function to add these elements to the DOM?
probably better if I leave this to someone with more larger scope experience than myself

function moveIndicator(i) {
var namePref = "indicator";
var counter = 0;	
for (counter=0;counter<=ImgCount; counter++) {
if (i == counter) {
var indicatorNumber = i.toString();
var name1 = namePref + indicatorNumber;
document.name1.src = "images/link_flower.jpg";
}else{
var blankNumber = counter.toString();
var name1= namePref + blankNumber;
document.name1.src = "images.blank.jpg";
}
}