How to change pictures without leave the webpage in html?

Question

I'm making a html page, in which I have several small button pictures array vertically on the left side, and a huge picture on the right side. When click the left side button pictures, the right side huge picture should change to something correspond with the button.

I know by use I can show pictures in different areas. But I've no idea that how could I change the picture by clicking another picture. How to do it?

This should help you [Creating Content Tabs with Pure CSS](http://www.onextrapixel.com/2013/07/31/creating-content-tabs-with-pure-css/) also you can view my answer on similar question [here](http://stackoverflow.com/questions/22886941/changing-content-on-the-same-html-file-page/22887278#22887278) but includes jQuery. — Milan and Friends, Apr 06 '14 at 13:39

score 1 · Answer 1 · answered Apr 06 '14 at 13:39

1

I know how to change it now! By reviewing my own html code written months before, I've got the idea.

You can simply add a target attribute in <'a'> label to point to a iframe target! Then you can click the picture or txt to change the content in iframe.

for example:

<a href="/html/pink.html" target="iframe">Pink World</a>

when click the "Pink World" text, you'll change the content of iframe into the content of pink.html under /html document.

Just that simple!

answered Apr 06 '14 at 13:39

Zen

4,381
5
29
56

Yes but it's complicated, you must create an entire document for every picture. Use tabbed content instead, it's easier. – Milan and Friends Apr 06 '14 at 13:44
@mdesdev, thank you, I decided to learn javascript as my second programming language. – Zen Apr 06 '14 at 13:59

score 0 · Answer 2 · answered Apr 06 '14 at 13:27

0

You can use JavaScript to do this by using events in the DOM of the pictures to change the page HTML so the images change.

answered Apr 06 '14 at 13:27

Martin Costello

9,672
5
60
72

Oh, I have only 3 hours left to complete this job, would that be sufficient to learn javascript? I totally have no experience about javascript. Just a few experience about python. – Zen Apr 06 '14 at 13:28
You don't need to learn *all* of JavaScript, just enough to do the bits you need. – Martin Costello Apr 06 '14 at 13:30
@Zen I think you can also use just CSS BUT it may be much more complicated than just try getting started with `javascript`, which is very easy for a beginner (to solve your problem). – King King Apr 06 '14 at 13:31

score 0 · Answer 3 · answered Apr 06 '14 at 13:30

0

Use javascript to change huge in when click on button, here is two beginner tutorial for you, first for click event and second for change image src

onClick Event
change img src

combine these two code to achieve your goal

answered Apr 06 '14 at 13:30

Farnabaz

4,030
1
22
42

How to change pictures without leave the webpage in html?

3 Answers3