Two Laptop Bag*
The moose likes HTML, CSS and JavaScript and the fly likes Image Help... Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Image Help..." Watch "Image Help..." New topic
Author

Image Help...

sam patel
Ranch Hand

Joined: Jun 13, 2002
Posts: 103
Hi Everybody,
i have this code that scrolls the image by left clicking and moving the mouse. But the problem is I have a tabel with two cells. Cell-1 has the Image and Cell-2 has documentType(which we don't care about...).
My problem is when the image is in cell-1 it creates scrollbars but i am not able to scroll that part of the cell. Its somehow scrolling the whole body(meaning its scrolling the scrollbars outside the table not inside the table cell-1.)..
I am posting the code...
Any help will be greatly appreciated...
Thanks In advance...
=========================================
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
sensitivity=2;

var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
EnableScroll=false;
function getMouseXY(e) {
if (IE) {
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;

} else {
tempX = e.pageX
tempY = e.pageY
}
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}

ScrollPage();
}

function ScrollPage(){
if(EnableScroll){
ChgX=Math.round((tempX-Lx)/sensitivity);
ChgY=Math.round((tempY-Ly)/sensitivity);
Lx=tempX;
Ly=tempY;
window.scrollBy(ChgX,ChgY);
}
}
function ScrollSet(X){
EnableScroll=X;
Lx=tempX;
Ly=tempY;
document.imageForm.myimage.style.cursor='hand';
}

</script>
</head>
<body name="body1">
<table border="1" width="98%" name="table1">
<tr>
<td width="92%" style="vertical-align: top;"> 
<form name="imageForm" onmousedown="ScrollSet(true);" onmouseup="ScrollSet(false);" >
<div style="overflow:auto;overflow-x:auto;overflow-y:auto;width:100%;height:500px;border-style:solid;border-width:1px;">
<img src="2.jpg" height="855" name="myimage" align="middle" style="position:absolute;", "cursor: hand;">
</div>
</form>
</td>
<td width="8%"> 
<form name="form1" onClickXXXX="getIndexValue();" method="post" >
<input name="index" type="hidden">
<select name="List1" size="30">
<option value=uindex537948>AX</option>
<option value=pindex=38866>XO</option>
<option value=uindex1208226>AV</option>
<option value=uindex537947>AU</option>
<option value=uindex555217>BT</option>
<option value=uindex537951>CI</option>
<option value=uindex537963>CP</option>
<option value=uindex549246>CP</option>
<option value=uindex537949>DR</option>
<option value=uindex605453>DL</option>
<option value=uindex537962>BA</option>
<option value=uindex537954>IN</option>
<option value=uindex537945>IP</option>
<option value=uindex550572>MD</option>
<option value=uindex557695>OT</option>
<option value=uindex540834>OL</option>
<option value=uindex533837>XP</option>
<option value=uindex556390>PY</option>
<option value=uindex537946>R6</option>
<option value=uindex540846>R6</option>
<option value=uindex537958>RD</option>
<option value=uindex537959>RD</option>
<option value=uindex533838>EK</option>
<option value=uindex537952>TD</option>
<option value=uindex567554>US</option>
<option value=uindex567552>WS</option>
<option value=uindex537268>BU</option>
<option value=uindex535497>MV</option>
</select>
</form>
</td>
</tr>
</table>
</body>
</html>
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
because the code I wrote scrolls the windows, you need to make the cell contain a div with the image in it
and you need to change the window.scroll to code for a div
Eric
sam patel
Ranch Hand

Joined: Jun 13, 2002
Posts: 103
Hi Eric,
Thank you for your reply...
As you can see, my code does contains a div with the image in it...
<td width="92%" style="vertical-align: top;">
<form name="imageForm" onmousedown="ScrollSet(true);" onmouseup="ScrollSet(false);" >
<div style="overflow:auto;overflow-x:auto;overflow-y:auto;width:100%;height:500px;border-style:solid;border-width:1px;">
<img src="2.jpg" height="855" name="myimage" align="middle" style="position:absolute;", "cursor: hand;">
</div>
</form>
</td>
If i am mis-understood please correct me...
How can i change the window.scroll to code for a div...
Again Thanks...
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
the easy way to do it is just use an iframe with the source I gave you. The hard way is to use the div, you would have to change the style of the div with style.top and style.left, but I am not scure if that will work, since the mouse position is not dealing with the div, but the window.
Try the iframe way, best and prob. only realistic way to do it.
Eric
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Image Help...