javascript - 子ノードとjavascriptのみでマウスオーバー時の画像を置き換える

Question

3 つの画像を並べて配置する必要があり、onmouseover 関数では、ユーザーがマウスを画像の上に移動すると、その特定の画像が他の 2 つの画像に複製されます。ユーザーがマウスを画像の外に移動すると、画像は最初のページに戻ります。しかし、これには子ノードを使用する必要があります。私はこれを理解することができません。

この次のコードを試しましたが、何もしません。ここにコードを貼り付けてみましたが、メッセージの本文にはみ出していたので、見えるところにこのコードペンを作りました。これまでのところ、index[1] と index[2] の pic を index[0] に表示するだけですが、他の変更は行われていません。 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];
        }
    }
}

誰かが何かを提案できるなら。