Hi,
Try this code for your requirement ...
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script language ="javascript" >
function f3() {
$("#smimg").hover(function () {
$("#bigimg").attr('src', this.src);
$("#bigimg").show();
}, function () {
});
}
function openbigimg(imgname) {
document.getElementById("bigimg").src = "../images/"+imgname;
document.getElementById("bigimg").style.display = "";
}
function closebigimg(imgname) {
document.getElementById("bigimg").style.display = "none";
}
</script>
</head>
<body onload ="f3()" >
<form id="form1" runat="server">
<asp:scriptmanager id="ScriptManager1" runat="server" xmlns:asp="#unknown">
</asp:scriptmanager>
<br />
<img id="smimg" src="../images/Sunset.jpg" width="50" height="50" onmouseenter="openbigimg('Sunset.jpg')" onmouseout="closebigimg('Sunset.jpg')" />
<img id="bigimg" src="../images/Sunset.jpg" width="300" height="300" style=" position :fixed; left :150px; top:150px; display:none;" />
</form>
</body>
</html>
I hope it works for you also.
If it works you've to change some little bit for your application
All the best