www.webdeveloper.com
Results 1 to 4 of 4

Thread: Click on an image, and have it change an image elsewhere on the page.

Hybrid View

  1. #1
    Join Date
    Jul 2014
    Posts
    2

    Click on an image, and have it change an image elsewhere on the page.

    Hello, I'm an utter amateur when it comes to coding anything and I feel over my head right now. Anyways, I'll describe what I'd like this page to do.

    I want to be able to click on an image, and have it replace an image elsewhere on the page.
    I plan to have multiple (20+) image thumbnails, that when clicked will replace a main image with a larger version of the thumbnail.
    I've been trying to accomplish this with OnClick, Radio Buttons and the like and I just can't seem to figure it out.

  2. #2
    Join Date
    Mar 2012
    Posts
    1,840
    You should really post an attempt at the problem, but here is my solution, using an IFrame:

    Code:
    <iframe name="mainpic" id="mainpic" src="graphics/TTpic0.jpg" width="400" height="225"frameborder="0" scrolling="no">
    <!-- fall-back image if IFrame not supported -->
    <img src="graphics/TTpic0.jpg" alt="pic0" width="400" height="225">
    </iframe>
    
    <div id="thumbnails">
    <a href="graphics/TTpic1.gif" target="mainpic"><img src="graphics/TTpic1s.jpg" alt="pic1" width="00" height="45"></a>
    <a href="graphics/TTpic2.gif" target="mainpic"><img src="graphics/TTpic2s.jpg" alt="pic2" width="80" height="45"></a>
    <a href="graphics/TTpic3.gif" target="mainpic"><img src="graphics/TTpic3s.jpg" alt="pic3" width="80" height="45"></a>
    </div>
    The IFrame initiailly loads TTpic0.jpg, and there is a fall-back to display TTpic0.jpg if IFrames are not supported. Then there is a div containing the thumbnails TTpic1s.jpg etc. which put the corresponding large picture TTpic1.jpg etc. in the IFrame when clicked on. I've only shown three thumbnails, but you get the idea...

    By the way, the ALT text should be more meaningful. This is only a demo.
    Last edited by jedaisoul; 07-31-2014 at 04:21 PM.

  3. #3
    Join Date
    Jul 2014
    Posts
    2
    Wow, that's perfect! Thanks a lot!
    My original code had me trying to use OnClick and I hit a dead end. It wasn't much to look at!

    This is a really clean, and simple solution you've shown me. When I get everything running I'll be sure to show you the results! Thanks a bunch!

  4. #4
    Join Date
    Mar 2012
    Posts
    1,840
    I'm getting to sound like deathshadow, but I can't stress too much how important it is to learn HTML and CSS properly before you tackle JavaScript. Only use JS for things that HTML and CSS cannot do...

Thread Information

Users Browsing this Thread

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

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