Member Avatar for KINGMAKER'S

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.

  • 2 Contributors
  • 1 Reply
  • 158 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by hericles
Member Avatar for hericles

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,

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.