This won't do what you are expecting:
<img src="image1.gif" alt="image2.gif" />
The ALT attribute is text-only--it won't do anything special if you give it an image URL.
If you want to initially display a low res image, then replace it with a high res image, you could do some javascript coding to swap out the images. Or, perhaps load the image into a div which has a background pattern filled with the low res image. Then, when the high res image loads, it'll load overtop the background.
Unfortunately, there's no direct way to do this.
Your second attempt will create a link to image2, but actually display image1.
<a href="image2.gif" ><img src="image1.gif"/></a>
If you want to popup a higher res version, @Sam's suggestion is a good idea.
This CSS might work for you (it works for me in Firefox 3):
<html>
<head>
<style>
.lowres { background-image: url('low-res.png');}
</style>
</head>
<body>
<div class="lowres" style="height:500px; width:500px">
<img src="hi-res.png" />
</div>
</body>
</html>
In that example, you have to set the div height/width to that of the image. It will actually load both images simultaneously, but presuming the low-res one loads quick, you might see it first while the hi-res image downloads.