Click Thumbnail to Change Main Image?

Question

After learning JS for about a month now and completing around 4 courses I am still unable to work out how to change an image when clicking a thumbnail! What I want to do is simple, I just want to change the Main Image when a thumbnail is clicked! In this example there are two thumbnail images in a div and a main image above them. I just want to change the main image when a thumbnail is clicked. I know this is DOM Manipulation and think it is: document.getElementById.....?

I have make a small page so that I can learn / try different things and and finally giving up and asking for help! The code is as follows:

#MainContainer {
position: relative;
margin:0px auto;
width: 500px;
height: 400px;
border: 1px solid black;
}
#MainImage {
position: absolute;
top: 10px;
left: 50px;
width: 398px;
height: 265px;
background: url(MainImage01.jpg);
border: 1px solid black;
}
#TNBodyContainer {
position: absolute;
top: 290px;
left: 100px;
border: 1px solid black;
width: 268px;
height: 88px;
}
#TNOne {
position: relative;
width: 133px;
height: 88px;
background: url(SmallImage01.jpg);
}
#TNTwo {
position: relative;
left:135px;
width: 133px;
height: 88px;
background: url(SmallImage02.jpg);
}

<body>
<div id="MainContainer">
    <div id="MainImage"></div>
    <div id="TNBodyContainer">
        <div id="TNOne">
            <div id="TNTwo"></div>
        </div>
    </div>

Thank you very much for any help.

Margate

score 3 · Accepted Answer · answered Mar 22 '13 at 00:52

You need to add some scripting to change the image when either of the thumbnails are clicked. This function is called when the page is loaded. Change the image names to suit. This should be placed in the section of the html page.

<script>
window.onload = function() {
        var mainImg = document.getElementById('Main');

        document.getElementById('TNOne').onclick = function() {
                mainImg.src = 'main1.jpg';
                //alert('one clicked');
        };
        document.getElementById('TNTwo').onclick = function() {
                mainImg.src = 'main2.jpg';
                //alert('two clicked');
        };
};
</script>

The two thumbnail divs become <img> tags with the same IDs. Similarly the main <img> is defined also (with id="Main"). Now the elements are clickable.

<div id="MainContainer">
    <div id="MainImage">
        <img id="Main" src="MainImage01.jpg"</img>
    </div>
    <div id="TNBodyContainer">
        <img id="TNOne" src="thumb1.jpg"></img>
        <img id="TNTwo" src="thumb2.jpg"></img>
    </div>
</div>

Finally CSS for the thumbnails, here float is used to keep the thumbnails in the same line within the TNBodyContainer div.

TNOne {
width: 133px;
height: 88px;
float:left;
}
#TNTwo {
width: 133px;
height: 88px;
float:left;
}

Thank you very much suspectus.Very handy for me. I will keep the code as I need to learn from it. Very nice of you to help me : ) — Margate, Mar 23 '13 at 03:20
@Margate No problem - it was fun to provide an answer. If think the Daniel's and/or my solution provided are of benefit, you can always show your appreciation by giving us an up-vote. — suspectus, Mar 23 '13 at 09:12

score 1 · Answer 2 · answered Mar 22 '13 at 01:08

To change the image in the CSS background property, you need to use

document.getElementById("MainImage").style.background

The right way to go is to add event listeners:

 document.getElementById("TNOne").addEventListener("click", function (event) {
          setImage(event);
      }, false);
      document.getElementById("TNTwo").addEventListener("click", function (event) {
          setImage(event);
      }, false);

  }

They both call the same function, but with event it is possible to see which one "clicked" with "event.target.id".

You can then decide what you want to do with for instance a switch statement. basically saying: if event.target.id == "TNOne".

You can see all this I made you a fiddle: http://jsfiddle.net/djwave28/32pQD/3/

There are some slight changes in your HTML and CSS too.

Thank you very much Daniel for the answer and the time it took to do this in jsfiddle. I have copied the code and will use it to learn from / solve my problem! Need to do more courses! — Margate, Mar 23 '13 at 03:12
You are very welcome :-) ... Been there done that, and it takes time to learn. The solution offered by @suspectus may work just the same. There is more information on this right here: http://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick Good luck ! — Daniel, Mar 23 '13 at 03:21

Click Thumbnail to Change Main Image?

2 Answers2

Related