Win a copy of Mesos in Action this week in the Cloud/Virtualizaton forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Image Help...

 
sam patel
Ranch Hand
Posts: 103
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 103
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic