Image amplification code

<Script language = "JavaScript">
<! --
Var srcX = 800; // source image size, which can be set as needed
Var srcY = 800;
Var bigX = 400; // preview window size, which can be set as needed
Var bigY = 400;
Var smallX = 200; // The width of the thumbnail.
Var smallY = srcY * smallX/srcX;
Var viewX = bigX/srcX * smallX; // preview range
Var viewY = bigY/srcY * smallY;
Var bl = srcX/smallX; // scale down
Var border = 1; // border
Window. onload = function (){
// Head. innerHTML = "loading images ";
Smallpic. width = smallX;
Smallpic. height = smallY;
Bigpic. width = srcX;
Bigpic. height = srcY;
View. style. width = viewX;
View. style. height = viewY;
Smallbox. style. borderWidth = border;
Bigbox. style. borderWidth = border;
If (window. event ){
Smallbox. style. width = smallpic. offsetWidth + border * 2;
Smallbox. style. height = smallpic. offsetHeight + border * 2;
Bigbox. style. width = bigX + border * 2;
Bigbox. style. height = bigY + border * 2;
} Else {
Smallbox. style. width = smallpic. offsetWidth;
Smallbox. style. height = smallpic. offsetHeight;
Bigbox. style. width = bigX;
Bigbox. style. height = bigY;
}
Move (event );
}
Function move (e ){
Document. getElementById ('bigbox'). style. display = "block ";
Var e = window. event? Window. event: e;
Var iebug = 0;
If (window. event ){
Var vX = e. offsetX-viewX/2;
Var vY = e. offsetY-viewY/2;
} Else {
Var vX = e. pageX-viewX/2-smallbox. offsetLeft-border;
Var vY = e. pageY-viewY/2-smallbox. offsetTop-border;
Iebug = 2;
}
If (vX <0) vX = 0;
If (vY <0) vY = 0;
If (vX> smallX-viewX-iebug) vX = smallX-viewX-iebug;
If (vY> smallY-viewY-iebug) vY = smallY-viewY-iebug;
Bigpico. style. marginLeft =-vX * bl
Bigpico. style. marginTop =-vY * bl
View. style. left = vX + smallbox. offsetLeft + border;
View. style. top = vY + smallbox. offsetTop + border;
}

Function aa (){
Document. getElementById ('bigbox'). style. display = "none ";

}
Function bb (){
Document. getElementById ('view'). style. border = "1px solid # CC9999 ";
}
// -->
</Script>
<Style type = "text/css">
<! --
* {Padding: 0; margin: 0}
Img {display: block ;}
# Smallbox {border: 1px # c33 solid; float: left; overflow: hidden; margin-top: 10px ;}
# Bigbox {border: 1px # c33 solid; overflow: hidden; position: absolute; left: 280px; top: 100px ;}
# View {position: absolute ;}
// -->
</Style>
<Div id = "smallbox"> </div>
<Div id = "bigbox"> <div id = "bigpico"> </div>
</Div>
<Div id = "view" onmousemove = "move (event)" onMouseOut = "aa ()" onMouseOver = "bb ()"> </div>