<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
text-align: center;
}
#small{
margin-top: 150px;
}
#showBig{
position: absolute;
display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("#small").bind("mouseover mouseout mousemove",function (event){
if(event.type == "mouseover"){
$("#showBig").show();
}else if (event.type == "mouseout"){
$("#showBig").hide();
}else if (event.type == "mousemove"){
console.log(event);
$("#showBig").offset({
left:event.pageX+100,
top:event.pageY+100
});
}
});
});
</script>
</head>
<body>
<img id="small" src="../images/1.JPG"/>
<div id="showBig">
<img src="../images/1.JPG">
</div>
</body>
</html>
