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.
You should really post an attempt at the problem, but here is my solution, using an IFrame:
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...
<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">
<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>
By the way, the ALT text should be more meaningful. This is only a demo.
Last edited by jedaisoul; 07-31-2014 at 03:21 PM.
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!
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)