Tryit Editor v1.4

<html>
<head>
<script type="text/javascript">
img2=new Image();
img2.src="landscape3.gif";
function changeImage()
{
document.getElementById('myImage').src=img2.src;
}
</script>
</head>

<body>

<p>When you mouse over the image, a new image will appear.</p>
<img id="myImage" onmouseover="changeImage()" border="0" width="160" height="120" src="landscape2.jpg">
<p>The new image appears instantly, because your browser has already loaded the image.</p>

</body>
</html>

Your Result:

Edit the code above and click to see the result.

W3Schools.com - Try it yourself