Onmousemove change image

I'd like to have three small pictures on the left and one larger picture to the right of them that changes when the mouse passes over one of the smaller ones.  I'm using this, but its not changing images for me.  Can you see what's wrong? or if its simpler just suggest new code please for Wordpress, Thank You

I tried:
changeImage('img src="https://www.mysite/picture2.jpg')"/> and
changeImage('src="https://www.mysite/picture2.jpg')"/> to see if that would help, it didn't.

<table>
<tr>
<td style="border-width: 3px;" width="5%">
<script type="text/javascript" language="javascript">
                function changeImage(img){
                   document.getElementById('bigImage').src=img;
                }
            </script>
            <div>
                <p><img src="https://www.mysite/picture1.jpg" alt="" width="60" onmouseover="changeImage('img src="https://www.mysite/picture1.jpg')"/></p>
                <p>
<img src="https://www.mysite/picture2.jpg" alt="" width="60" class="size-medium wp-image-2289" onmouseover="changeImage('img src="https://www.mysite/picture2.jpg')"/>
                <p>
<img src="https://www.mysite/picture3.jpg" alt="" width="60" onmouseover="changeImage('img src="https://www.mysite/picture3.jpg')"/>
                <p>&nbsp;</p>
                </br>
            </div>
</td>
<td style="border-width: 3px;" width="25%">
<img src="https://www.mysite/StartingLargePicture.jpg" alt="" id="bigImage" />
</td>
</tr>
</table>