Once you've given the <img> tag a name (which we have above, we've called it link1, link2, etc) you can modify any attribute within it using JS. The JS above changes the "src" attribute based on two events - on mouse over and on mouse out.
You can request the src be changed upon page load by using the following code in the page:
<script type="text/javascript">
<!--
document.getElementById('link1').src="http://yoursite.com/blabla.gif";
//--></script>
You'd include this near the top of whatever your link1 page is. As soon as the code is executed, the src of the button called "link1" is changed to whatever you want; your "hover" image, a totally new image, or whatever. In the above example it becomes blabla.gif
It is a pretty gung-ho way of doing it though; skins made with image rollovers would have done it more elegantly, but this works as an easy retrofit. If you want to include variables, preloaders and stuff, just learn JS or use a skin with it already included.