It's easy with jQuery:
<html>
<head>
<title> ... </title>
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
</head>
<body>
<img alt="Image" id="image" />
<script type="text/javascript">
$(document).ready(function() {
imageElement = $("#image");
imageElement.attr("src", "small.png");
imageElement.hover(
function() {
$(this).attr("src", "big.png");
},
function() {
$(this).attr("src", "small.png");
}
);
});
</script>
</body>
</html>
I assume you have two images: "small.png" and "big.png", basically, both could be made from the same source image, but "small.png" was re-sampled down to smaller size with same aspect ratio.
It works, tested.
If you need to learn jQuery, please see:
http://en.wikipedia.org/wiki/JQuery[
^],
http://jquery.com/[
^],
http://docs.jquery.com/Tutorials:How_jQuery_Works[
^],
http://docs.jquery.com/Tutorials[
^].
—SA