Replacing images on mouseover with only childnodes and javascript

I have to place three images side by side, and onmouseover function, when the user moves the mouse over an image , that particular image will be duplicate on the other two images. When the use moves the mouse out from the image, the image will restore as in initial page. But I have to use childnodes for this. I'm not able to figure this out.

I've tried this following code, but it doesn't do anything. I tried to paste the code here, but it was getting out onto the body of the message so I made this codepen where you can see it. So far I'm only to get index[1] and index[2] pic to show up on index[0], but no other changes are happening. https://codepen.io/anon/pen/xNjezN

function heroes(q){
    if(q.src == imgArray[0])
    {
        for(var index=0; index<images.length; index++)
        {
            images[index] = document.getElementById("legends").childNodes[index];
            images[index].src = imgArray[0];
        }
    }
    else if(q.src == imgArray[1])
    {
        for(var index=0; index<images.length; index++)
        {
            images[index] = document.getElementById("legends").childNodes[index];
            images[index].src = imgArray[1];
        }
    }
    else if(q.src == imgArray[2])
    {
        for(var index=0; index<images.length; index++)
        {
            images[index] = document.getElementById("legends").childNodes[index];
            images[index].src = imgArray[2];
        }
    }
}

If someone can please suggest something.

You're almost there. There are two things to note. One, child nodes is actually a "NodeList", which is only "array-like". It can be converted to an array with Array.from(nodeList). Second is the line break was being read as a "text" node, so actually showing 7 childNodes. You can filter them out with the Array.prototype.filter() method.

Then once you're working with the actual DOM elements, you can set and reset the src: https://codepen.io/anon/pen/vwjwXm?editors=1010