Major Man said:
Okay I tried Google per above. None of those sites have what I'm
looking for, but this one comes very close:
http://www.qiksearch.com/javascripts/scrolling_image.htm
Ick. That's ... crappy code. Nestcape 4 and IE only, and uses
"eval" a lot. It's about as good an example as they get of
how *not* to do it
The only thing is, I don't want the image to scroll all the way to
the edge of the browser and then disappear.... I need the image
displayed in a 300x200 window, and scroll within that window ONLY.
Would it be possible to slightly alter the qiksearch.com code to do
this?
I wouldn't bother (that would require *tocuhing* that code *yack*).
How about just doing:
---
<div style="width:320px;height:200px;overflow:auto;">
<img src="largeImage" style="width:700px;height:200px;" alt="..">
</div>
---
(nothing beats scrollbars when you want people to scroll)
Or, if you want it to move automatically:
---
<div style="width:320px;height:200px;overflow:hidden;position:relative">
<img nam="foo" src="../../PicA.png"
style="width:700px;height:200px;position:absolute;" alt="..">
</div>
<script type="text/javascript">
var fooImg = document.images['foo'];
var fooCtr = 0;
function scrollFooDiv() {
fooCtr++;
var xpos = Math.round(-Math.cos(Math.PI*fooCtr/50)*190)+190;
fooImg.style.left = -xpos+"px";
}
setInterval(scrollFooDiv, 100);
</script>
Nice code /L
I'm currently working on the below if you care to
comment on it please, (as you've helped me out so much in the past)
maybe it might help the OP with some idea. this basically is to put 9
large maps into the "wrapper" and I will be adding wrap-around feature
to it. eg when the user scrolls onto any of the right 3 maps the far
left 3 are moved to the right letting the user scroll continuously
(sp) to the right.
(I tried below code and it works in IE6 & NS 7)
HTH the OP.
Al
THE CODE:
---------------------
<html>
<head>
<script type="text/javascript">
var iTimeoutTime = 10; // speed of scrolling inc to slowdown
var timeoutID = null; // ID to use to stop settimeout function
var movePixels = 10; // distance to move the maps on each scroll
window.document.onmouseout = stopScrollMap;
function scrollMap(sDirection) {
var directionX = 0, directionY = 0;
switch(sDirection.toLowerCase()) {
case 'up':
directionY = 1;
break;
case 'down':
directionY = -1;
break;
case 'left':
directionX = 1;
break;
case 'right':
directionX = -1;
break;
default:
break;
}
// Move all 9 maps in the direction
for(var i = 0; i < 9 ; i++) {
oHandle = document.getElementById('Map' + i);
if (oHandle) {
oHandle.style.left =
parseInt(oHandle.style.left) + (movePixels * directionX) + 'px'
oHandle.style.top =
parseInt(oHandle.style.top) + (movePixels * directionY) + 'px'
}
}
// recall the function until the timeout ID is cleared.
timeoutID = setTimeout("scrollMap('" + sDirection + "')",
iTimeoutTime);
}
function stopScrollMap() {
clearTimeout(timeoutID);
}
</script>
<style type="text/css">
#FullMapWrapper {position: absolute; top:130; left: 130; width: 500px;
height:350px; overflow: hidden; background: transparent; border: thick
ridge }
#Map0 {position: absolute; top: -700px; left: -1000px;}
#Map1 {position: absolute; top: -700px; left: 0px;}
#Map2 {position: absolute; top: -700x; left: 1000px;}
#Map3 {position: absolute; top: 0px; left: -1000px;}
#Map4 {position: absolute; top: 0px; left: 0px;}
#Map5 {position: absolute; top: 0px; left: 1000px;}
#Map6 {position: absolute; top: 700px; left: -1000px;}
#Map7 {position: absolute; top: 700px; left: 0px;}
#Map8 {position: absolute; top: 700px; left: 1000px;}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr><td></td><td align="center"><span
onmouseover="scrollMap('up');"><img
src="GreenUp.gif"></span></td><td></td></tr>
<tr><td align="center"><span onmouseover="scrollMap('left');"><img
src="GreenLeft.gif"></span></td><td><img
src="Map-full_small.gif"></td><td align="center"><span
onmouseover="scrollMap('right');"><img
src="GreenRight.gif"></span></td></tr>
<tr><td></td><td align="center"><span
onmouseover="scrollMap('down');"><img
src="GreenDown.gif"></span></td><td></td></tr>
</table>
<div id="FullMapWrapper" >
<img id="Map0" src="map-0.gif" border="0" width="1000" height="700">
<img id="Map1" src="map-1.gif" border="0" width="1000" height="700">
<img id="Map2" src="map-2.gif" border="0" width="1000" height="700">
<img id="Map3" src="map-3.gif" border="0" width="1000" height="700">
<img id="Map4" src="map-4.gif" border="0" width="1000" height="700">
<img id="Map5" src="map-5.gif" border="0" width="1000" height="700">
<img id="Map6" src="map-6.gif" border="0" width="1000" height="700">
<img id="Map7" src="map-7.gif" border="0" width="1000" height="700">
<img id="Map8" src="map-8.gif" border="0" width="1000" height="700">
</div>
<script type="text/javascript">
for(var i = 0; i < 9 ; i++) {
oHandle = document.getElementById('Map' + i);
if (oHandle) {
oHandle.style.left = ((i % 3) * 1000)-1000 +
'px';
oHandle.style.top = (Math.floor(i/3) *
700)-700 + 'px';
//alert('i='+i+' left='+oHandle.style.left + '
top=' + oHandle.style.top);
}
}
</script>
</body>
</html>
