kippie
05-21-2003, 01:58 PM
In the HTML below the lemon will grow onMouseOver by the function zoomImg and shrink again onMouseOut by the function zoomOutImg. It works fine but: when someone moves fast between onMouseOver and OnMouseOut the lemon starts oscillating. Is there a way to stop this? Is there a function to make which can stop zoomImg and zoomOutImg and bring the lemon back to the original dimension so that a user can start again?
This is the HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<script language="JavaScript"><!--
<!-- Web Site: http://mike.dransfield.org/ -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
var ival, imgname, total, steps, maxx, maxy, currentx, currenty, dx, dy;
function zoomImg(imgname, total, steps, maxx, maxy) {
// convert the total from seconds to miliseconds
total = total * 1000;
objref = eval("document.getElementById('"+imgname+"')");
currentx = objref.width;
currenty = objref.height;
// work out how much we need to increase the image by each step
// devide image sizes by number of steps to get the amount we need to change each step
stepx = maxx / steps;
stepy = maxy / steps;
// devide the total time (in ms) by the number of steps to get the interval time
inttime = total / steps;
// set the interval to increase the size of the image by the required pixels
functionRef = "resizeImg('"+imgname+"', "+stepx+", "+stepy+", "+maxx+", "+maxy+")";
ival = setInterval(functionRef, inttime);
}
function resizeImg(imgname, dx, dy, maxx, maxy) {
objref = eval("document.getElementById('"+imgname+"')");
currentx = objref.width;
currenty = objref.height;
if ((currentx<maxx-dx) && (currenty<maxy-dy)) {
objref.height = currenty + dy;
objref.width = currentx + dx;
}
else {
clearInterval(ival);
objref.height = maxy;
objref.width = maxx;
}
}
// -->
</script>
<script language="JavaScript"><!--
<!-- Web Site: http://mike.dransfield.org/ -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
var ivalout, imgname, totalout, steps, minx, miny, currentxout, currentyout, ex, ey;
function zoomoutImg(imgname, totalout, stepsout, minx, miny) {
// convert the totalout from seconds to miliseconds
totalout = totalout * 200;
objref = eval("document.getElementById('"+imgname+"')");
currentxout = objref.width;
currentyout = objref.height;
// work out how much we need to increase the image by each step
// devide image sizes by number of stepsout to get the amount we need to change each step
stepxout = minx / stepsout;
stepyout = miny / stepsout;
// devide the totalout time (in ms) by the number of stepsout to get the interval time
inttime = totalout / stepsout;
// set the interval to increase the size of the image by the required pixels
functionRefout = "resizeoutImg('"+imgname+"', "+stepxout+", "+stepyout+", "+minx+", "+miny+")";
ivalout = setInterval(functionRefout, inttime);
}
function resizeoutImg(imgname, ex, ey, minx, miny) {
objref = eval("document.getElementById('"+imgname+"')");
currentx = objref.width;
currenty = objref.height;
if ((currentx>minx+ex) && (currenty>miny+ey)) {
objref.height = currenty - ey;
objref.width = currentx - ex;
}
else {
clearInterval(ivalout);
objref.height = miny;
objref.width = minx;
}
}
// -->
</script>
<style type="text/css"><!--
#layer1 { position: absolute; top: 31px; left: 168px; width: 100px; height: 100px; z-index: 1; visibility: visible }
#layer2 { position: absolute; top: 90px; left: 234px; width: 100px; height: 165px; z-index: 2; visibility: visible }
-->
</style>
</head>
<body>
<!-- STEP THREE: Copy this code into the BODY of your HTML document -->
<table>
<tr height="202">
<td width="150" height="202">
<center>
<img src="http://www.festifood.nl/citroen.jpg" name="test" id="test" width="75" height="100" onmouseover="zoomImg('test',0.5,50,150,200)" onmouseout="zoomoutImg('test',0.2,25,75,100)"></center>
</td>
</tr>
</table>
<br>
</body>
</html>
Kippie
This is the HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<script language="JavaScript"><!--
<!-- Web Site: http://mike.dransfield.org/ -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
var ival, imgname, total, steps, maxx, maxy, currentx, currenty, dx, dy;
function zoomImg(imgname, total, steps, maxx, maxy) {
// convert the total from seconds to miliseconds
total = total * 1000;
objref = eval("document.getElementById('"+imgname+"')");
currentx = objref.width;
currenty = objref.height;
// work out how much we need to increase the image by each step
// devide image sizes by number of steps to get the amount we need to change each step
stepx = maxx / steps;
stepy = maxy / steps;
// devide the total time (in ms) by the number of steps to get the interval time
inttime = total / steps;
// set the interval to increase the size of the image by the required pixels
functionRef = "resizeImg('"+imgname+"', "+stepx+", "+stepy+", "+maxx+", "+maxy+")";
ival = setInterval(functionRef, inttime);
}
function resizeImg(imgname, dx, dy, maxx, maxy) {
objref = eval("document.getElementById('"+imgname+"')");
currentx = objref.width;
currenty = objref.height;
if ((currentx<maxx-dx) && (currenty<maxy-dy)) {
objref.height = currenty + dy;
objref.width = currentx + dx;
}
else {
clearInterval(ival);
objref.height = maxy;
objref.width = maxx;
}
}
// -->
</script>
<script language="JavaScript"><!--
<!-- Web Site: http://mike.dransfield.org/ -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
var ivalout, imgname, totalout, steps, minx, miny, currentxout, currentyout, ex, ey;
function zoomoutImg(imgname, totalout, stepsout, minx, miny) {
// convert the totalout from seconds to miliseconds
totalout = totalout * 200;
objref = eval("document.getElementById('"+imgname+"')");
currentxout = objref.width;
currentyout = objref.height;
// work out how much we need to increase the image by each step
// devide image sizes by number of stepsout to get the amount we need to change each step
stepxout = minx / stepsout;
stepyout = miny / stepsout;
// devide the totalout time (in ms) by the number of stepsout to get the interval time
inttime = totalout / stepsout;
// set the interval to increase the size of the image by the required pixels
functionRefout = "resizeoutImg('"+imgname+"', "+stepxout+", "+stepyout+", "+minx+", "+miny+")";
ivalout = setInterval(functionRefout, inttime);
}
function resizeoutImg(imgname, ex, ey, minx, miny) {
objref = eval("document.getElementById('"+imgname+"')");
currentx = objref.width;
currenty = objref.height;
if ((currentx>minx+ex) && (currenty>miny+ey)) {
objref.height = currenty - ey;
objref.width = currentx - ex;
}
else {
clearInterval(ivalout);
objref.height = miny;
objref.width = minx;
}
}
// -->
</script>
<style type="text/css"><!--
#layer1 { position: absolute; top: 31px; left: 168px; width: 100px; height: 100px; z-index: 1; visibility: visible }
#layer2 { position: absolute; top: 90px; left: 234px; width: 100px; height: 165px; z-index: 2; visibility: visible }
-->
</style>
</head>
<body>
<!-- STEP THREE: Copy this code into the BODY of your HTML document -->
<table>
<tr height="202">
<td width="150" height="202">
<center>
<img src="http://www.festifood.nl/citroen.jpg" name="test" id="test" width="75" height="100" onmouseover="zoomImg('test',0.5,50,150,200)" onmouseout="zoomoutImg('test',0.2,25,75,100)"></center>
</td>
</tr>
</table>
<br>
</body>
</html>
Kippie