Функциональность ролловера JavaScript

Question

Я пытаюсь заставить изображения меняться, когда на них наведена мышь. Как изменить на другое изображение, или оно становится больше или меньше. Я что-то упустил?

window.onload = rolloverInit;
function rolloverInit() {
for (var i=0; i<document.images.length; i++) {     
if (document.images[i].parentNode.tagName == "a") {
setupRollover(document.images[i]);
}
}
}

function setupRollover(theImage) {
 theImage.outImage = new Image();
 theImage.outImage.src = theImage.src;
 theImage.onmouseout = function() {
    this.src = this.outImage.src;
 }

 theImage.overImage = new Image();
 theImage.overImage.src = "images/" + theImage.id + ".jpg";
 theImage.onmouseover = function() {
    this.src = this.overImage.src;
 }
 }


 Image myImage = document.images.namedItem("images/firefighter.jpg");
 Image myImage2 = document.images.namedItem("images/work.jpg");
 setupRollover(myImage);
 setupRollover(myImage2);