/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] JavaScript Image Replacement

Copy linkTweet thisAlerts:
Feb 01.2011

Hello,

I have an assignment that I am having some trouble with, am wondering if someone would be able to help me.
Description below:

There are a series of thumbnail images and corresponding full-sized images provided.

1.When the page first loads, display one of the full sized images in a fixed position and also display all the thumbnail images.

  • 2. If the user clicks on a thumbnail image, the full sized image should be updated with the appropriate picture.

    • We are not allowed to use jQuery, must be original JavaScript. I was thinking about giving each image an ID and then somehow using the document.getElementByID to grab them and move around have not been making much progress.

    I am really getting frustrated with this, so if someone is able to help me out, would be very much appreciated.

    Thanks in advance,
    Max

    to post a comment
    JavaScript

    3 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @tirnaFeb 01.2011 — You can put an onclick on each thumbnail that sends the thumbnail number to a function which then uses that number to assign the appropriate image (image paths stored in an array) to the src of the img element in the container holding the enlargemment image.
    Copy linkTweet thisAlerts:
    @MaxAvionauthorFeb 02.2011 — Thank you Tirna,

    I will give that a shot. If it is possible to post some code just to get me started that would be great, if not then I will start on this and post what I am able to come up with. Again, very much appreciated.

    Max
    Copy linkTweet thisAlerts:
    @MaxAvionauthorFeb 02.2011 — Actually, please disregard this. jQuery became an option and it is working now using the .attrib method ?

    Thanks!!

    Max
    ×

    Success!

    Help @MaxAvion spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...