Simple zoom in and zoom out to show coordinate function.
-------------------------------------
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 intobjwidth;
var intobjheight;
var intdivheight;
var intzoomratio;
Intdivheight = ObjDivMain.style.pixelHeight;
Intobjheight = Obj.style.pixelHeight;
Intzoomratio = Intdivheight/intobjheight;
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 = EVENT.X-OBJDRAG.L;
ObjDrag.style.top = event.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 ();
OBNDRCT = 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" >
<input type= "button" Name= "Zoomout" value= "Zoomout" >
<input type= "button" Name= "Original" value= "Original" >
<input type= "button" Name= "Fitscreen" value= "Fitscreen" >
<input type= "button" Name= "Btnview" value= "Hide/view" >
<input id= "Btnimginfo" size= "M" >
</TD>
</TR>
</TABLE>
<div id= "Divmain" class= "Divmain" ></div>
<div id= "Divmenu" class= "Divmenu" style= "Visibility:hidden" >
<table class= "Tbmenu" >
<TR>
<TD>10%</TD>
<td><button id= "Hrscroll" class= "Hrscroll" ><TD>1600%</TD>
</TR>
</TABLE>
</div>
<div id= "Divflag" style= "position:absolute;visibility:hidden;width:1px;height:10px;z-index:99" Fnslipmousemove () ">↑</DIV>
</form>
</BODY>
</HTML>