how to make an image pop up using web application by just moving pointer over it and back to same seize as soon as pointer moves out.

You will want to use javascript. The onmouseover and onmouseout commands can be used to call the javascript functions you want to alter the image.
A very simple example would be something like this:

<HTML>
<HEAD>
   <TITLE>Untitled HTML Document</TITLE>
   <script language="javascript">
   function largerPic() {
      var img = document.getElementById("image1");
      img.src = "IMG_2145.jpg"
      img.style.width = "300px";
   }

   function smallPic() {
      var img = document.getElementById("image1");
      img.src = "IMG_2146.jpg"
      img.style.width = "200px";
   }
   </script>
</HEAD>
<BODY BGCOLOR="white">

<a href="#" onmouseover="largerPic();" onmouseout="smallPic();" ><img id="image1" src="img1.jpg" /></a>
</BODY>
</HTML>

You can use the height properties to alter the image if you need to as well (style.height).
Hope that helps,