funktion Zoom() stopper hvis den bliver kaldt igen ved andet elm.
Hej,Nedenstående virker fint med én knap, men med 2 knapper virker det ikke helt efter ønske.
Funktionen zoomer ind på knappen indtil hMax er nået, eller onmouseout er kaldt, hvorefter den zoomer ud igen.
Der opstår et problem, hvis onmouseover bliver kaldt på en anden knap inden den er færdig med at zoome ud på den forrige. Den forrige stopper med at zoome ud. Jeg vil gerne have den til at fortsætte indtil den når hMin, selvom den anden knap er begyndt at zoome ind.
mvh
Lifeenergy
<?xml version="1.0" encoding="iso-8859-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" xml:lang="da">
<head>
<title>menuzoom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var style, ZoomedIn=false, ZoomedOut=false, timer, d=document;
var wMax=140;
var hMax=28
var wMin=110;
var hMin=22;
var speed = 40; // hvor hurtigt skal den zoome - jo mindre tal jo hurtigere?
var step = 1;
var imgratio = wMin/hMin;
function Zoom(ZoomIt,id){
if(d.getElementById) style = d.getElementById(id).style;
else if (d.all) style = d.all[id].style;
if ((ZoomedOut && ZoomIt) || (ZoomedIn && !ZoomIt)){
clearTimeout(timer);
if (ZoomedOut)ZoomedOut=false;
else ZoomedIn=false;
}
if (style){
var w = parseInt(style.width);
var h = parseInt(style.height);
var l = parseInt(style.left);
var t = parseInt(style.top);
if (ZoomIt){
if (h < hMax){
w += Math.floor(step * imgratio);
h += step;
l -= Math.floor((step * imgratio) / 2);
t -= Math.floor(step /2);
ZoomedIn=true;
}
}
else {
if (h > hMin){
w -= Math.floor(step * imgratio);
h -= step;
l += Math.floor((step * imgratio) / 2);
t += Math.floor(step /2);
ZoomedOut=true;
}
}
style.width= w +'px';
style.height= h +'px';
style.left= l +'px';
style.top= t +'px';
timer = setTimeout('Zoom('+ZoomIt+',\''+id+'\')',speed);
}
}
</script>
</head>
<body>
<img id="img1" src="knap.png" style="width: 110px; height: 22px; position: absolute; top: 250px; left: 500px;" onmouseover="Zoom(true,this.id);" onmouseout="Zoom(false,this.id);" />
<img id="img2" src="knap.png" style="width: 110px; height: 22px; position: absolute; top: 250px; left: 620px;" onmouseover="Zoom(true,this.id);" onmouseout="Zoom(false,this.id);" />
</body>
</html>
