This is a really simple thing if you use jQuery.
Let's assume you have two versions of the same image: original one, "big.png", and the one resampled to smaller size, "small.png". The this complete sample will do the trick:
<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() { // please see the article "How jQuery works" below
imageElement = $("#image"); // get wrapper using id selector
imageElement.attr("src", "small.png"); // initial state
imageElement.hover( // accepts two handler functions:
function() { // first one, called when mouse goes in
$(this).attr("src", "big.png");
},
function() { // second one, called when mouse goes out
$(this).attr("src", "small.png");
}
);
}); </script>
</body>
</html>
If you need to learn jQuery (highly recommended), please see:
http://en.wikipedia.org/wiki/JQuery[
^],
http://jquery.com/[
^],
http://learn.jquery.com/[
^],
http://learn.jquery.com/using-jquery-core/[
^],
http://learn.jquery.com/about-jquery/how-jquery-works/[
^] (start from here).
—SA
Submit an article or tip