kippie
05-25-2003, 03:26 PM
In the HTML below I use a function "zoomImg" to enlarge an image (onMouseOver) and another function (zoomImgOut) to shrink that image again (onMouseOut). There are three pictures enlarging and shrinking and everything works fine, but only if the mouse moves slowly. If you move faster, the pictures do not shrink completely. I wonder if something could be changed to make this go smoother. I have tried a lot of things but I cannot get it better. In the end I want to make a page with some 30 pictures which enlarge onMouseOver and shrink again onMouseOut. Could anyone help?
This is the HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<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,mydiv) {
// convert the total from seconds to miliseconds
//if (ivalout) clearInterval(ivalout);
clearInterval(ivalout);
total = total * 700;
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+",'"+mydiv+"')";
ival = setInterval(functionRef, inttime);
}
function resizeImg(imgname, dx, dy, maxx, maxy, mydiv) {
objref = document.getElementById(imgname);
document.getElementById('layer1').style.zIndex = '1';
document.getElementById('layer2').style.zIndex = '1';
document.getElementById('layer3').style.zIndex = '1';
document.getElementById(mydiv).style.zIndex = '2';
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) {
//if (ival) clearInterval(ival);
clearInterval(ival);
// convert the totalout from seconds to miliseconds
totalout = totalout * 70;
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; z-index: 1; top: 79px; left: 196px; width: 154px; height: 206px; visibility: visible }
#layer2 { position: absolute; z-index: 1; top: 79px; left: 282px; width: 158px; height: 206px; visibility: visible }
#layer3 { position: absolute; z-index: 1; top: 80px; left: 369px; width: 158px; height: 206px; visibility: visible }-->
</style>
</head>
<body>
<div id="layer1">
<table>
<tr height="202">
<td width="150" height="202">
<center>
<img src="http://www.festifood.nl/thijs.jpg" name="test1" id="test1" width="75" height="100" onmouseover="zoomImg('test1',0.1,20,120,160,'layer1'); return true;" onmouseout="zoomoutImg('test1',0.1,5,75,100);"></center>
</td>
</tr>
</table>
</div>
<div id="layer2">
<table>
<tr height="202">
<td width="154" height="202">
<center>
<img src="http://www.festifood.nl/herman.jpg" name="test2" id="test2" width="75" height="100" onmouseover="zoomImg('test2',0.1,20,120,160,'layer2'); return true" onmouseout="zoomoutImg('test2',0.1,5,75,100);"></center>
</td>
</tr>
</table>
</div>
<div id="layer3">
<table>
<tr height="202">
<td width="154" height="202">
<center>
<img src="http://www.festifood.nl/thijs3.jpg" name="test3" id="test3" width="75" height="100" onmouseover="zoomImg('test3',0.1,20,120,160,'layer3'); return true" onmouseout="zoomoutImg('test3',0.1,5,75,100);"></center>
</td>
</tr>
</table>
</div>
</body>
</html>
Kippie
This is the HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<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,mydiv) {
// convert the total from seconds to miliseconds
//if (ivalout) clearInterval(ivalout);
clearInterval(ivalout);
total = total * 700;
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+",'"+mydiv+"')";
ival = setInterval(functionRef, inttime);
}
function resizeImg(imgname, dx, dy, maxx, maxy, mydiv) {
objref = document.getElementById(imgname);
document.getElementById('layer1').style.zIndex = '1';
document.getElementById('layer2').style.zIndex = '1';
document.getElementById('layer3').style.zIndex = '1';
document.getElementById(mydiv).style.zIndex = '2';
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) {
//if (ival) clearInterval(ival);
clearInterval(ival);
// convert the totalout from seconds to miliseconds
totalout = totalout * 70;
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; z-index: 1; top: 79px; left: 196px; width: 154px; height: 206px; visibility: visible }
#layer2 { position: absolute; z-index: 1; top: 79px; left: 282px; width: 158px; height: 206px; visibility: visible }
#layer3 { position: absolute; z-index: 1; top: 80px; left: 369px; width: 158px; height: 206px; visibility: visible }-->
</style>
</head>
<body>
<div id="layer1">
<table>
<tr height="202">
<td width="150" height="202">
<center>
<img src="http://www.festifood.nl/thijs.jpg" name="test1" id="test1" width="75" height="100" onmouseover="zoomImg('test1',0.1,20,120,160,'layer1'); return true;" onmouseout="zoomoutImg('test1',0.1,5,75,100);"></center>
</td>
</tr>
</table>
</div>
<div id="layer2">
<table>
<tr height="202">
<td width="154" height="202">
<center>
<img src="http://www.festifood.nl/herman.jpg" name="test2" id="test2" width="75" height="100" onmouseover="zoomImg('test2',0.1,20,120,160,'layer2'); return true" onmouseout="zoomoutImg('test2',0.1,5,75,100);"></center>
</td>
</tr>
</table>
</div>
<div id="layer3">
<table>
<tr height="202">
<td width="154" height="202">
<center>
<img src="http://www.festifood.nl/thijs3.jpg" name="test3" id="test3" width="75" height="100" onmouseover="zoomImg('test3',0.1,20,120,160,'layer3'); return true" onmouseout="zoomoutImg('test3',0.1,5,75,100);"></center>
</td>
</tr>
</table>
</div>
</body>
</html>
Kippie