PDA

View Full Version : Problem with smooth/animated resize of image



mat106
May 13th, 2006, 05:39 PM
Hi all,

I'm trying to use some javascript in order to smoothly animate an image from one size (large) to another (small). I'm trying to implement what is described at http://developer.apple.com/internet/webcontent/animation.html but for some reason instead of the image animating smoothly it jumps to the final size. This is the code i'm using:

<p class='center'><img id='mainimage' src='path/to/image.jpg' alt='' usemap='#imagemap' /></p>


function smoothResize() {
var mainimage = document.getElementById('mainimage')
mainimage.width = mainimage.width * .99;
if (mainimage.width > 200)
{
setTimeout(smoothResize(), 50);
}
}I've also tried something along the lines of:


function smoothResize() {
var mainimage = document.getElementById('mainimage')
for (var i = 100; i = 25; i--)
{
mainimage.width = mainimage.width * (i/100);
}
}but that didn't work either. Using parseInt on the values of width doesn't seem to make any difference nor does placing the image inside a <div> as opposed to a <p>. Any ideas on how i can get this working?

coothead
May 13th, 2006, 05:59 PM
Hi there mat106,

try this example, it works onmouseover...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<base href="http://coothead.homestead.com/files/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
body {
background-color:#000;
}
div {
text-align:center;
margin-top:50px;
}
#autumn {
border:3px double #fff;
}
-->
</style>

<script type="text/javascript">
<!--

var c=800;

var speed=40;

window.onload=function() {
obj=document.getElementById('autumn');
obj.style.width=c+'px';
obj.onmouseover=function() {
reduceWith();
}
}

function reduceWith() {
obj.style.width=c+'px';
c-=3;
if(c<200) {
clearTimeout(shrink);
return;
}
shrink=setTimeout('reduceWith()',speed);
}
//-->
</script>

</head>
<body>

<div>
<img id="autumn" src="Autumn.jpg" alt=""/>
</div>

</body>
</html>

...but you can change this to onclick if required. :)

coothead

mat106
May 13th, 2006, 06:20 PM
Thanks coothead. That works better than what i had but like in your example i'm wanting to animate a rather large image (650px) and the animation isn't really smooth and takes a really long time. I'm wanting that kind of reduction in size but smoothly and within a fraction of a second - the kind of smoothness demonstrated in the script.aculo.us demos. Is it possible?

coothead
May 13th, 2006, 06:49 PM
Hi there mat106,

I'm wanting that kind of reduction in size but smoothly and within a fraction of a second
Well, you must experiment with these two variables...

var speed and var c.

Try something like...

var speed=10;

...and...

c-=60;

...for starters. :)

coothead