JS Zoom function freaks out!

Hey there,

I’m new on these forums so if I missed a relevant post concerning this matter… sorry ?

I’m trying to write a zoom/resize function for use as navigation. This works fine but when I move the mouse over it quickly several times the image goes all freaky on me.

JS:

[CODE]function zoomIn(target) {
var which = document.getElementById(target);
var currentWidth = which.style.width.split(‘px’)[0];
var currentHeight = which.style.height.split(‘px’)[0];
var targetWidth = 84;
var targetHeight = 91;
function doZoom() {
currentWidth++;
currentHeight++;
which.style.width = currentWidth;
which.style.height = currentHeight;
if(currentWidth == targetWidth) {
clearInterval(interval);
}
}
interval = window.setInterval(doZoom, 10);
}
function zoomOut(target) {
var which = document.getElementById(target);
var currentWidth = which.style.width.split(‘px’)[0];
var currentHeight = which.style.height.split(‘px’)[0];
var targetWidth = 74;
var targetHeight = 81;
function doZoom() {
currentWidth–;
currentHeight–;
which.style.width = currentWidth;
which.style.height = currentHeight;
if(currentWidth == targetWidth) {
clearInterval(interval);
}
}
interval = window.setInterval(doZoom, 10);
}[/CODE]

(relevant) HTML:

[CODE]<img id=”eerste” onMouseOver=”zoomIn(‘eerste’)” onMouseOut=”zoomOut(‘eerste’)” src=”images/button.png” style=”width: 74px; height: 81px;”>[/CODE]

Any suggestions would be nice…

Also in #JavaScript _↴