Please this code is not working for rollover and rollout events ?

(rollover.html file)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type= "text/javascript" src="script.js"></script>
</head>

<body>
<a href="button1.html"><img src="images/button1_off.jpg" width="125" height="85" alt="Button1" id="button1"/></a>&nbsp;&nbsp;
<a href="button2.html"> <img src="images/button2_off.jpg" width="125" height="85" alt="button2" id="button2"/></a>
</body>
</html>


------------------------------------------------------------------------------------------------------------
(script.js file)
// JavaScript Document
window.onload=rolloverinit;

function rolloverinit()
{
for(var i=0; i<document.images.length; i++)
{
if(document.images.parentNode.tagName=="A")
{
setuprollover(document.images);
}
}
}

function setuprollover(thisimage){
thisimage.outimage=new image();
thisimage.outimage.src=thisimage.src;
thisimage.onmouseout=rollout;

thisimage.overimage=new image();
thisimage.overimage.src="images/" + thisimage.id + "_on.jpg";
thisimage.onmouseover=rollover;
}

function rollout(){
this.src=this.outimage.src;
}

function rollover(){
this.src=this.overimage.src;
}