鼠标上的交换图像翻转[Javascript]

Question

这是我的HTML：

<div id="imageBox">
    <img id="cat1" onmouseover="swapImage1()" src="images/cat1.jpg" alt="Cat Picture 1" height="272" width="272">
</div>

这是我的JavaScript：

function swapImage1() {
    document.getElementByID('cat1').src = "images/cat2.jpg";
}

为什么每当我将光标移到cat1.jpg上时，它都不会变成cat2.jpg？我做错了什么？