www.webdeveloper.com
Results 1 to 7 of 7

Thread: Switch image by variable?

  1. #1
    Join Date
    Apr 2011
    Posts
    3

    Switch image by variable?

    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.

  2. #2
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    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

  3. #3
    Join Date
    Apr 2011
    Posts
    3
    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?

  4. #4
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    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

  5. #5
    Join Date
    Apr 2011
    Posts
    3
    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";
    }
    }

  6. #6
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    I assume that ImgCount is being globally declared in another function?
    |||||
    o . Q
    ___ "You live and you learn; or you don't live long." - Lazarus Long

    ^_^

  7. #7
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    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


    Code:
    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";
    }
    }
    Last edited by DanInMA; 04-12-2011 at 01:44 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles