Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: ASP.NET Javascript
I add a image control & set the picture in web page.
 
I want to animate that picture, i.e.:- to increase/decrease the picture size by slowly onmouseover/onmouseout event using java scripts programming.But not a suddenly increase/decrease the size of picture.
 
I want to slowly increase/decrease the picture size onmouseover/onmouseout.
 
How will i solve that above problem by java scripts,but not using jquery?????
 
Please Please help me anybody .......
Posted 8-Oct-12 21:09pm
Comments
Dinesh Ambaliya at 9-Oct-12 3:15am
   
Use timer object to delay in increasing size of image
gladiatron at 9-Oct-12 4:02am
   
what do u have against jquery? it IS javascript afterall...only much easier to work with. You can easily use toggle() and slide functions to achieve the desired effect.

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
var imgObj = null;
function init(){
   imgObj = document.getElementById('is');
   imgObj.style.height =100+'px';
   i=0;
   }
 

 
function inc()
{
imgObj.style.height = parseInt(imgObj.style.height) + 5 + 'px';
i++;
if(i!=15)
{
inc_img = setTimeout(inc,30);
}
else
{
clearTimeout(inc_img);
i=0;
}
}
 

function dec()
{
imgObj.style.height = parseInt(imgObj.style.height) - 5 + 'px';
i++;
if(i!=15)
{
dec_img = setTimeout(dec,30);
}
else
{
clearTimeout(dec_img);
i=0;
}
}
window.onload =init;
</script>
</head>
 
<body>
<img src="klematis2.jpg" id="is" onmouseover="inc()" onmouseout="dec()" />
</body>
</html>
  Permalink  

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

  Print Answers RSS
0 OriginalGriff 432
1 Kornfeld Eliyahu Peter 420
2 Yogesh Kumar Tyagi 244
3 Nelek 115
4 Gihan Liyanage 99
0 Kornfeld Eliyahu Peter 420
1 OriginalGriff 303
2 Yogesh Kumar Tyagi 230
3 Gihan Liyanage 99
4 sankarsan parida 90


Advertise | Privacy | Mobile
Web03 | 2.8.140827.1 | Last Updated 11 Oct 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100