Hi cyberious,
I've taken a very traditional approach... there are many ways to achieve this.. but this is quite a stable example, and works cross-browser for IE4+ and NN4+ The script first preloads your images and assigns them to variable names (I've kept your existing image names). If you check the Javascript itself you will see something like the code snippet below for the 'contact' image. You'll notice that the width and height settings of the image are also passed as parameters to help the preload.
Code:
contacton= new Image(137,25);
contacton.src="images/contact-over.gif";
contactoff= new Image(137,25);
contactoff.src="images/contact.gif";
There are then two functions,
m_over and
m_out which control the switching of the image by using the
imgName variable.
In the page itself, the mouseover effect is added as below:
I've uploaded a sample
page based around your existing homepage, have a look and see what you think.
Paul