100给第一位帮我解决问题的朋友!!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Document </TITLE>
<style type="text/css">
body{
margin: 0px;
background-color: #999999 ;
}
.DivMain {
position : absolute;
text-align : center ;
overflow : hidden;
}
.ImgMain {
position : absolute;
overflow : hidden;
}
.TBMain {
background-color: #CCCCCC ;
padding: 0px;
}
</style><SCRIPT LANGUAGE="JavaScript">
<!-- var originalWidth;
var originalHeight;
var ObjDrag;function setInit(objImg) { originalWidth = objImg.width;
originalHeight = objImg.height;
//initImg(objImg);
fmImgZoom.Original.click();
}function initImg(objCurrent) { var intBodyWidth ;
var intBodyHeight ;
var objTbMain ;
var objDivMain ;
//var objImgMain ; intBodyWidth = document.body.clientWidth ;
intBodyHeight = document.body.clientHeight ; objTbMain = document.getElementById("tbMain") ;
objDivMain = document.getElementById("divMain") ;
//objImgMain = document.getElementById("imgMain") ; objTbMain.top = 0;
objTbMain.height = 20;
objTbMain.width = intBodyWidth;

objDivMain.top = 20 ;
objDivMain.left = 0 ;
objDivMain.height = intBodyHeight - 20 ;
objDivMain.width = intBodyWidth ; initZoom(objCurrent);
}function initZoom(obj){ var intObjWidth ;
var intObjHeight ;
var intDivHeight ;
var intZoomRatio ;
var objDivMain ;
var objTbMain; objDivMain = document.getElementById("DivMain");
objTbMain = document.getElementById("tbMain") ; intDivHeight = objDivMain.height;
intObjHeight = obj.height;
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 setFitScreen() { var objImg; objImg = document.getElementById("imgMain") ;
initImg(objImg);
}function setOriginal() { var objImg;
var objDivMain ;
var intBodyWidth ;
var intBodyHeight ; intBodyWidth = document.body.clientWidth ;
intBodyHeight = document.body.clientHeight ; objImg = document.getElementById("imgMain") ;
objDivMain = document.getElementById("divMain") ; objImg.style.left = 0 ;
objImg.style.top = 0 ;
objImg.width = originalWidth;
objImg.height = originalHeight;
objImg.style.zoom = 1 ; objDivMain.style.width = intBodyWidth ;
objDivMain.style.height = intBodyHeight - 20 ; fnWritePos(objImg.style.left,objImg.style.top,objImg.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 fnWritePos(intLeft,intTop,intZoom) {
var objbtnImgInfo;
objbtnImgInfo = document.getElementById("btnImgInfo") ;
objbtnImgInfo.innerText = " ImgLeft:" + intLeft + " ImgTop:" + intTop + " ImgZoom:" + intZoom ;
}function fnZoomIn() { var objImg; objImg = document.getElementById("imgMain") ;
objImg.style.zoom = parseFloat(objImg.style.zoom) + 0.01 ;
fnWritePos(objImg.style.left,objImg.style.top,objImg.style.zoom);
}function fnZoomOut() { var objImg; objImg = document.getElementById("imgMain") ;
objImg.style.zoom = parseFloat(objImg.style.zoom) - 0.01 ;
fnWritePos(objImg.style.left,objImg.style.top,objImg.style.zoom);
}function fnContextMenu() {
window.event.returnValue=false;
}function fnDivMouseDown() {
if ( event.button == 2 && event.srcElement.id != "imgMain") {
setOriginal();
}
}
function setDisplay() { var objImg; objImg = document.getElementById("imgMain") ; if(objImg.style.visibility == ""){
objImg.style.visibility = "hidden";
}
else{
objImg.style.visibility = "";
}
}
//-->
</SCRIPT>
</HEAD><BODY oncontextmenu="fnContextMenu()">
<form name="fmImgZoom">
<TABLE id="tbMain" class="TBMain">
<TR>
<TD height="20">
<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="FitScreen" value="hide/view" onclick="setDisplay()">
<input id="btnImgInfo" size="50">
</TD>
</TR>
</TABLE>
<div id="divMain" class="DivMain" onmousedown="fnDivMouseDown()"><img src="22.jpg" id="imgMain" class="imgMain" onload="setInit(this)" onmousedown="fnMouseDown(this)" onmousemove="fnMouseMove()" onmouseup="fnMouseUp()" ></div>
</form>
</BODY>
</HTML>

解决方案 »

  1.   

    to  fantiny:很多操作图片的技巧,谢谢.但是要怎样才能换图片呢?我加了一点,可是不行
    <input type="button" name="changepic" value="changepic" onclick="changepic()">
    function changepic() {
    var objImg;
    objImg = document.getElementById("imgMain") ;
    objImg.scr = "img\3.jpg";
    }
      

  2.   

    objImg.src = "img/3.jpg?" + Math.random()*1000;//src not scr
    后边加个随机数保证刷新图片...
      

  3.   

    document.good.src=myimage.src;
    document.good.style.position=absolute;
    document.good.left=400px;
    document.good.top=200px;//后边的这些参数都是字符串的...
    //楼主对于JS跟DHTML一点都不熟吧?
      

  4.   

    to:matrixy
    谢谢!
    //楼主对于JS跟DHTML一点都不熟吧?是,刚学,没办法,竟然写错了.   **src,晕.
    document.good.src=myimage.src;
    下面三行的也是字符串吗?不是吧?
    document.good.style.position=absolute; 
    document.good.left=400px;
    document.good.top=200px;
      

  5.   

    TO: matrixy
    再请您看看,我怎么换不了图呢?<html><head><title>TEST</title></head><body><img name="JpgMain" style="POSITION:absolute; left:200px; top:200px;" >
    <img name="GifPanel" style="POSITION:absolute; left:-500px; top:-500px;">
    <script language="javascript"><!--
    var GifPanelSelect;
    var GifPanelPath = "img/";  imgmain=new Image();
    imgmain.src="img/200SB1.jpg";
    document.JpgMain.src=imgmain.src;myimage=new Image();
    myimage.src="img/200SB1_P_2.gif";
    document.GifPanel.src=myimage.src;function changejpg1()
    {
    GifPanelSelect = GifPanelPath + "200SB1_P_1.gif";
    document.GifPanel.src=GifPanelSelect;
    document.GifPanel.style.top = document.JpgMain.style.top + 50;
    document.GifPanel.style.left = document.JpgMain.style.left +53;
    }
    function changejpg2()
    {document.GifPanel.style.top = document.JpgMain.style.top + 100;
    document.GifPanel.style.left = document.JpgMain.style.left +53;GifPanelSelect = GifPanelPath + "200SB1_P_2.gif";
    document.GifPanel.src=GifPanelSelect;}
    function changejpg3()
    {
    GifPanelSelect = GifPanelPath + "200SB1_P_3.gif";
    document.GifPanel.src=GifPanelSelect;
    document.GifPanel.style.top = document.JpgMain.style.top + 50;
    document.GifPanel.style.left = document.JpgMain.style.left +53;
    }//-->
    </script><p><form name="form"><input type="button" value="change1" name="change1" onclick="changejpg1()">
    <input type="button" value="change2" name="change2" onclick="changejpg2()">
    <input type="button" value="change3" name="change3" onclick="changejpg3()">
    </form>
    </body>
    </html>
      

  6.   

    document.GifPanel.style.left = document.JpgMain.style.left +53;document.JpgMain.style.left的返回值是100px这样的样式的,你得先把它转换成整型的数值parseInt(document.JpgMain.style.left,10) + 53
      

  7.   

    太谢谢了。
    可是您说的这些在我找的学习资料里没有见到。可否告诉我在什么学习资料里有这些说明呢？？我平时是写delphi的，公司招的网站不会写代码，没办法。另：可否加您的QQ呢？我的QQ：115550919