Javascript: Mouseover Thumbnail, Bigger Image Displays..trying to use 'this'

Question

I am trying to mouseover a thumbnail image and have the larger image of that thumbnail appear below. I know I can target each thumbnail individually, but I would like to use 'this' so I am able to apply the code to any image that I add later. Explanations are greatly appreciated. Thank you! :)

HTML CODE

<div id="gallery">

    <ul>
        <li><a href="images/image1.jpg"><img id="image1" src="images/image1-thumbnail.jpg" alt="#"></a></li>
        <li><a href="images/image2.jpg"><img id="image2" src="images/image2-thumbnail.jpg" alt="#"></a></li>
        <li><a href="images/image3.jpg"><img id="image3" src="images/image3-thumbnail.jpg" alt="#"></a></li>
    </ul>

    <img id="main-image" src="images/image1.jpg" alt="#">

</div>

Javascript Code

This is how I was originally trying to do it. I gave a class of 'image' and 'data-' to each anchor tag (this isn't written in the above HTML code), but it only applies the changes to one thumbnail (whatever number I replace [0] with, and I don't know how to add more numbers), but I believe the best way to achieve what I'm looking to do is by using 'this' and I don't know how to use it.

var image = document.getElementsByClassName('image')[0];
var mainImage = document.getElementById('main-image');

image.onmouseover = function () {
    mainImage.src = image.getAttribute('data-mainimage');
    mainImage.alt = image.alt;
};

Answer 1

var image = document.getElementsByClassName('image');
var mainImage = document.getElementById('main-image'); 

[].forEach.call(image,function(img){ 
    img.onmouseover = function(){
         mainImage.src = img.parentNode.href; 
     };
});

getElementsByClassName returns a set of elements, so you have to iterate over them..