Make images change when the mouse moves over the image

First, define the images in JavaScript in the HEAD - specifically the size (width,height) and the path to the image.
<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.images) {
    link1=new Image(75,20);
    link1.src="images/image_out.gif";
    link1on=new Image(75,20);
    link1on.src="images/image_over.gif";
}

// now define the actual function which will change the images

function swap(imageName, imageFile) {
if (!document.images) return;
eval('document.images[imageName].src='+imageFile+'.src');
}
// -->
</SCRIPT>

Define the IMG tag within the normal HTML, including a name, as follows :-
<a href="link.html"
  onmouseover="swap('name_one','link1on'); return true"
  onmouseout="swap('name_one','link1');">
<IMG SRC="image_out.gif" WIDTH=75 HEIGHT=20 NAME="name_one"></a>

An example :-

The actual images are:-