Trouble with mouseover graphic

[SurfingDan]

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>

[madddidley]

I think this is the easiest way to do a roll over.


pre load the image
cacheImage1 = new Image;
cacheImage1.src = "images/2thingsbutton_over.gif";


then in the img src tag put this

onMouseOver="this.src='yourimage';"
onMouseOut="this.src='originalimage';"




my site
www.madddidley.com

[Vladdy]

Originally posted by madddidley
I think this is the easiest way to do a roll over.
pre load the image
cacheImage1 = new Image;
cacheImage1.src = "images/2thingsbutton_over.gif";
then in the img src tag put this
onMouseOver="this.src='yourimage';"
onMouseOut="this.src='originalimage';"


The easiest way to do rollover is with CSS:
www.vladdy.net/Demos/SubmitStyling.html

[gildash]

I find this way sooo much more easy, i came up with it and it works for me like a charm and is the easiest javascript youll get

function onmo1()
{
document.getElementById('button1').src="rolloverimage.gif";
}
function onmout1()
{
document.getElementById('button1').src="normalimage.gif";
}
//then html
</script>
<img src="normalimage.gif" id="button1" onMouseover="onmo1()" onMouseout="onmout1()">

of course i do this and it works like a charm and it really avoids using alot of code. youll prolly have to make a new function for ech button and their on and off mouse sources

[SurfingDan]

I wasn't aware that you could do it with CSS - that would be much better I think, based on my implementation of my page.

Can you explain the code behind it? Thanks.