Simple zoom-in and zoom-out to display coordinates.
-------------------------------------------------------------------------- DEMO code:
--------------------------------------------------------------------------
<! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en">
<HTML>
<Head>
<Title> document </title>
<Style type = "text/CSS">
Body {
Padding: 0px;
Margin: 0px;
Background-color: #999999 ;}
. Divmain {
Position: absolute;
Text-align: center;
Overflow: hidden;
}
. Divmenu {
Position: absolute;
Text-align: left;
Overflow: hidden;
}
. Imgmain {
Position: absolute;
Overflow: hidden;
Border: 0px;
}
. Tbmain {
Background-color: # cccccc;
Padding: 0px;
Border: 0px;
Z-index: 99;
Line-Height: 18px;
}
. Tbmenu {
Background-color: # ffcccc;
Padding: 0px;
Border: 0px;
Z-index: 99;
Color: #000000;
}
. Hrscroll {
Margin: 0px;
Background-color: # ffffff;
Padding: 0px;
Border: 0px;
Z-index: 99;
Color: #000000;
Border-Spacing: 0px;
Width: 160px;
Height: 10px;
}
</Style> <script language = "JavaScript">
<! -- Var originalwidth;
VaR originalheight; var objdivmain;
VaR objtbmain; var objimg;
VaR objdrag; var objdivmenu;
VaR objtbmemu; var objbtnimginfo; var objdivflag;
VaR objhrscroll; var orcts;
VaR otextrange; function setinit (OBJ) {objdivmain = Document. getelementbyid ("divmain ");
Objtbmain = Document. getelementbyid ("tbmain"); objdivmenu = Document. getelementbyid ("divmenu ");
Objtbmenu = Document. getelementbyid ("tbmenu"); objimg = Document. getelementbyid ("imgmain ");
Objbtnimginfo = Document. getelementbyid ("btnimginfo ");
Objdivflag = Document. getelementbyid ("divflag ");
Objhrscroll = Document. getelementbyid ("hrscroll"); originalwidth = obj. width;
Originalheight = obj. height; objimg. style. width = originalwidth;
Objimg. style. Height = originalheight; fmimgzoom. fitscreen. Click ();
} Function setfitscreen () {initimg (objimg );
} Function setoriginal () {var intbodywidth;
VaR intbodyheight; intbodywidth = Document. Body. clientwidth;
Intbodyheight = Document. Body. clientheight; objimg. style. Left = 0;
Objimg. style. Top = 0;
Objimg. style. width = originalwidth;
Objimg. style. Height = originalheight;
Objimg. style. Zoom = 1; objdivmain. style. width = intbodywidth;
Objdivmain. style. Height = intbodyheight-objtbmain. clientheight; fnwritepos (objimg. style. Left, objimg. style. Top, objimg. style. Zoom );
} Function initimg (objcurrent) {var intbodywidth;
VaR intbodyheight; intbodywidth = Document. Body. clientwidth;
Intbodyheight = Document. Body. clientheight; objtbmain. style. Top = 0;
Objtbmain. style. Height = 20;
Objtbmain. style. width = intbodywidth;
Objdivmain. style. Left = 0;
Objdivmain. style. Height = intbodyheight-objtbmain. clientheight;
Objdivmain. style. width = intbodywidth; initzoom (objcurrent );
} Function initzoom (OBJ) {var returns bjwidth;
VaR returns bjheight;
VaR intdivheight;
VaR intzoomratio; intdivheight = objdivmain. style. pixelheight;
Required bjheight = obj. style. pixelheight;
Intzoomratio = intdivheight/Optional bjheight; obj. style. Zoom = intzoomratio;
OBJ. style. Top = 0;
OBJ. style. Left = 0; fnwritepos (obj. style. Left, obj. style. Top, obj. style. Zoom );
} Function fnmousedown (OBJ ){
Objdrag = OBJ;
Objdrag. setcapture ();
Objdrag. L = event. x-ObjDrag.style.pixelLeft;
Objdrag. t = event. y-ObjDrag.style.pixelTop;
} Function fnmousemove (){
If (objdrag! = NULL ){
Objdrag. style. Left = events. x-ObjDrag.l;
Objdrag. style. Top = events. y-ObjDrag.t;
Fnwritepos (objdrag. style. Left, objdrag. style. Top, objdrag. style. Zoom );
}
} Function fnmouseup (){
If (objdrag! = NULL ){
Objdrag. releasecapture ();
Objdrag = NULL;
}
} Function fnzoomin () {objimg. style. Zoom = parsefloat (objimg. style. Zoom) + 0.01;
Fnwritepos (objimg. style. Left, objimg. style. Top, objimg. style. Zoom );
} Function fnzoomout () {If (objimg. style. Zoom> 0.01 ){
Objimg. style. Zoom = parsefloat (objimg. style. Zoom)-0.01;
Fnwritepos (objimg. style. Left, objimg. style. Top, objimg. style. Zoom );
}
} Function fndivmousedown (){
If (event. Button = 2 & event. srcelement. ID! = "Imgmain "){
Objdivmenu. style. Top = event. Y;
Objdivmenu. style. Left = event. X;
Objdivmenu. style. Visibility = ""; otextrange = objhrscroll. createTextRange ();
Orcts = otextrange. getclientrects ();
Obndrc Ct = objdivflag. getboundingclientrect ();
Objdivflag. style. Top = orcts [0]. Top;
Objdivflag. style. Left = orcts [0]. Left + parseint (objimg. style. Zoom * 10 );
Objdivflag. style. Visibility = "";}
If (event. Button = 1 & event. srcelement. ID! = "Imgmain "){
Objdivmenu. style. Visibility = "hidden ";
Objdivflag. style. Visibility = "hidden ";
}
} Function fnwritepos (intleft, inttop, intzoom ){
Objbtnimginfo. innertext = "imgleft:" + intleft + "imgtop:" + inttop + "imgzoom:" + intzoom;
} Function fnslipmousedown (OBJ ){
Objdrag = OBJ;
Objdrag. setcapture ();
Objdrag. L = event. X-objdrag. style. pixelleft;
Objdrag. t = objdrag. style. pixeltop;
} Function fnslipmousemove (){
If (objdrag! = NULL) {If (event. x> = orcts [0]. Left & event. x <= orcts [0]. Right ){
Objdrag. style. Left = event. X-objdivflag. offsetwidth/2;
} Objdrag. t = objdrag. style. pixeltop;
VaR intcurrentpos = objdrag. style. pixelleft-orcts [0]. Left + objdivflag. offsetwidth/2;
VaR intpiczoom = intcurrentpos/10;
Objimg. style. Zoom = intpiczoom;
Fnwritepos (objimg. style. Left, objimg. style. Top, objimg. style. Zoom );
}
} Function fnslipmouseup (){
If (objdrag! = NULL ){
Objdrag. releasecapture ();
Objdrag = NULL;
}
} Function setdisplay () {If (objimg. style. Visibility = ""){
Objimg. style. Visibility = "hidden ";
}
Else {
Objimg. style. Visibility = "";
}
} Function fncontextmenu (){
Window. event. returnvalue = false;
}
// -->
</SCRIPT>
</Head> <body oncontextmenu = "fncontextmenu ()">
<Form name = "fmimgzoom">
<Table id = "tbmain" class = "tbmain">
<Tr>
<TD>
<Input type = "button" name = "zoomin" value = "zoomin" onclick = "fnzoomin ()">
<Input type = "button" name = "zoomout" value = "zoomout" onclick = "fnzoomout ()">
<Input type = "button" name = "original" value = "original" onclick = "setoriginal ()">
<Input type = "button" name = "fitscreen" value = "fitscreen" onclick = "setfitscreen ()">
<Input type = "button" name = "btnview" value = "hide/View" onclick = "setdisplay ()">
<Input id = "btnimginfo" size = "50">
</TD>
</Tr>
</Table>
<Div id = "divmain" class = "divmain" onmousedown = "fndivmousedown () "> </div>
<Div id = "divmenu" class = "divmenu" style = "visibility: hidden">
<Table class = "tbmenu">
<Tr>
<TD> 10% </TD>
<TD> <button id = "hrscroll" class = "hrscroll"> <HR noshade> </button> </TD>
<TD> 1600% </TD>
</Tr>
</Table>
</Div>
<Div id = "divflag" style = "position: absolute; visibility: hidden; width: 1px; Height: 10px; Z-index: 99" onmousedown = "fnslipmousedown (this) "onmousemove =" fnslipmousemove () "onmouseup =" fnslipmouseup () "onmouseover =" this. style. cursor = 'hand' "onmouseout =" this. style. cursor = ''"> cursor </div>
</Form>
</Body>
</Html>
