Click here to Skip to main content
15,867,453 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
hello Sir,
i need to fix the problem to zoom image when our mouse curser goes on image with the using of java script
Posted
Comments
ZurdoDev 25-Apr-15 12:51pm    
Have you googled for examples? Where are you stuck?
Sergey Alexandrovich Kryukov 25-Apr-15 20:56pm    
What have you tried so far?
What exactly it should be? You can have, say, two or more images re-sampled in advance and change them. Or you can re-sample an image dynamically on the page (but why? how many different sizes do you want to show?). Both things are simple enough.
—SA
Sergey Alexandrovich Kryukov 25-Apr-15 20:57pm    
Any why are those tags: "Java", "PHP", "SQL" (??!)?
—SA
Abhishek shukla 5-May-15 3:04am    
Thanks for all i got my solution

1 solution

You can do the zoom image by mousehover using jQuery. The complete code is as following,

HTML
<html>
<title>Image Zoom Mousehover</title>
<style type="text/css">
  div{display:inline}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
  $("#I1").mouseover(function(){

    $("#Img1").animate({height:300,width:300},"fast");
   });
 $("#I1").mouseout(function(){
    $("#Img1").animate({height:100,width:100},"fast");
   });
});
</script>
<body>

<div id="I1" style="removed:absolute; z-index:10;">
  <img id="Img1" src="foo.jpg" style="position:relative; z-index:10;" width="100" height="100">
</img></div>

</body>
</html>
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900