I'm building an unobtrusive image rollover function. The basic function is working ok. In the file I have an image with id="contactImage" AND name="contactImage".

In my .js file I have...

function rollOver(newPath) {
     document.images['contactImage'].src = newPath;

document.getElementById("contactImage").onmouseover = function {rollOver("Images/mouseoverimage.jpg")};

document.getElementById("contactImage").onmouseout = function {rollOver("Images/image.jpg")};
This works fine with the event handlers using the id attribute, and rollOver() using the name attribute. So question one is, can I eliminate the id? I'd really rather have that available for other uses than having to use two attributes just to make the rollover. But I've tried swapping this for

document.getElementsByName("contactImage").onmouseover = function {rollOver("Images/mouseoverimage.jpg")};
Even though everything I read says this is a DOM level 1 method, IE and FF don't swap the image. (Though IE doesn't throw errors like during my little experiment with getElementByName. Ooops!) What am I doing wrong? (Feel free to say everything! )