Put this between the <head></head> tags (This part only needs to be inserted once):
<script language="javascript">
<!-- hide from old browsers
function js1_1() {
if (document.images) return true;
else return false;
}
function msOver(nme, src) {
document.image1_name.src = 'normal_image1_source';
document.image2_name.src = 'normal_image2_source';
document.image3_name.src = 'normal_image2_source';
nme.src = src;
return true;
}
// end hiding -->
</script>
For the image you want to change write this (This part can be duplicated as required):
<a href="your_link1"
onmouseover="if (js1_1()) msOverOut(image1_name,'mouseover_image1_source')">
<img src="normal_image1_source" name="image1_name" border="0">
</a>
<a href="your_link2"
onmouseover="if (js1_1()) msOverOut(image2_name,'mouseover_image2_source')">
<img src="normal_image2_source" name="image2_name" border="0">
</a>
<a href="your_link3"
onmouseover="if (js1_1()) msOverOut(image3_name,'mouseover_image3_source')">
<img src="normal_image3_source" name="image3_name" border="0">
</a>
NOTE: The image(s) have to be a hyperlink for the mouseover to work.
If you do not want the images to link anywhere type the link as
<a href="#">.
| 
