Trouble with mouseover graphic

I have no real experience with Java yet, but am trying to learn on my latest website. I downloaded a script that changes a graphic when you move your mouseover the image. I use it for my link buttons at the top of the screen (home, contact, etc). It works great most of the time. The problem is when I’m at my home page (home.html) and then click on my home img. The image sends me to home.html which should be fine, but when it does the screen reloads and the home button is now gone and the ALT tag is left with a red X. This happens to all my buttons when I’m at their page and click the button to load that page. Can someone give me some clues where I’ve gone wrong? Below is the script. Thank you. -D

<script type=”text/javascript”>
function rollover() {
if (!document.getElementById) return
var imgOrSrc;
var imgPreload = new Array();
var images = document.getElementsByTagName(‘img’);
for (var i = 0; i < images.length; i++) {
if (images[i].getAttribute(‘rsrc’)) {
imgPreload[i] = new Image();
imgPreload[i].src = images[i].getAttribute(‘rsrc’);
images[i].onmouseover = function() {
imgOrSrc = this.getAttribute(‘src’);
this.setAttribute(‘src’,this.getAttribute(‘rsrc’))
}
images[i].onmouseout = function() {
this.setAttribute(‘src’,imgOrSrc)
}
}
}
}
</script>

<!– HERE IS THE HTML FOR THE IMAGES –>
<a href=”http://www.test.com/index.html”><img alt=”Main page” src=”http://www.test.com/images/button_weblog.gif” rsrc=”http://www.test.com/images/button_weblog2.gif” border=0></a>

<a href=”http://www.test.com/about.html”><img alt=”About the page” src=”http://www.test.com/images/button_about.gif” rsrc=”http://www.test.com/images/button_about2.gif” border=0></a>

Also in #JavaScript _↴