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.