scrolling image on website

[Major Man]

Hi,

I have this .jpg picture that's 700 x 200. What I wanna do is display
it on a 300 x 200 window, and have it scroll left and right, back and
forth.

Can anyone help this newbie? TIA

[Evertjan.]

Major Man wrote on 10 aug 2004 in comp.lang.javas cript:

I have this .jpg picture that's 700 x 200. What I wanna do is display
it on a 300 x 200 window, and have it scroll left and right, back and
forth.

Can anyone help this newbie? TIA

Google can:

http://www.google.com/search?q=scrol...age+javascript

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Major Man]

On 10 Aug 2004 12:32:35 GMT, "Evertjan."
<ex************ **@interxnl.net > wrote:

Google can:

http://www.google.com/search?q=scrol...age+javascript

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...ling_image.htm

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?

[Richard Hijdra]

> http://www.qiksearch.com/javascripts...ling_image.htm
Doesn't work in NS

R.

[Major Man]

On Tue, 10 Aug 2004 22:43:03 +0200, Richard Hijdra
<in************ *@www.rhi.nl> wrote:

http://www.qiksearch.com/javascripts...ling_image.htm

Doesn't work in NS

R.

By NS do you mean Netscape?

That doesn't matter for me because everyone visiting my webpage will
be IE users.

[Richard Hijdra]

>>>http://www.qiksearch.com/javascripts...ling_image.htm

Doesn't work in NS

R.

By NS do you mean Netscape?

That doesn't matter for me because everyone visiting my webpage will
be IE users.

Aha, OK! It was just to let u know...

Richard

[Lasse Reichstein Nielsen]

Major Man <ma***@man.co m> writes:

On 10 Aug 2004 12:32:35 GMT, "Evertjan."
<ex************ **@interxnl.net > wrote:

Google can:

http://www.google.com/search?q=scrol...age+javascript
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...ling_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:32 0px;height:200p x;overflow:auto ;">
<img src="largeImage " style="width:70 0px;height:200p x;" alt="..">
</div>
---
(nothing beats scrollbars when you want people to scroll)

Or, if you want it to move automatically:
---
<div style="width:32 0px;height:200p x;overflow:hidd en;position:rel ative">
<img nam="foo" src="../../PicA.png"
style="width:70 0px;height:200p x;position:abso lute;" alt="..">
</div>
<script type="text/javascript">
var fooImg = document.images['foo'];
var fooCtr = 0;
function scrollFooDiv() {
fooCtr++;
var xpos = Math.round(-Math.cos(Math.P I*fooCtr/50)*190)+190;
fooImg.style.le ft = -xpos+"px";
}
setInterval(scr ollFooDiv, 100);
</script>
---
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Major Man]

On Wed, 11 Aug 2004 00:25:18 +0200, Lasse Reichstein Nielsen
<lr*@hotpop.com > wrote:

How about just doing:
---
<div style="width:32 0px;height:200p x;overflow:auto ;">
<img src="largeImage " style="width:70 0px;height:200p x;" alt="..">
</div>
---
(nothing beats scrollbars when you want people to scroll)

I just tried this out. Manual scrollbar works surprisingly well, much
better than I thought it would.

Thanks dude, I'm gonna use this!

[Evertjan.]

Lasse Reichstein Nielsen wrote on 11 aug 2004 in comp.lang.javas cript:

Or, if you want it to move automatically:
---
<div style="width:32 0px;height:200p x;overflow:hidd en;position:rel ative">
<img nam="foo" src="../../PicA.png"
style="width:70 0px;height:200p x;position:abso lute;" alt="..">
</div>
<script type="text/javascript">
var fooImg = document.images['foo'];
var fooCtr = 0;
function scrollFooDiv() {
fooCtr++;
var xpos = Math.round(-Math.cos(Math.P I*fooCtr/50)*190)+190;
fooImg.style.le ft = -xpos+"px";
}
setInterval(scr ollFooDiv, 100);
</script>

Nice.

By changing nam="foo" to name="foo" it works great.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Harag]

On Wed, 11 Aug 2004 00:25:18 +0200, Lasse Reichstein Nielsen
<lr*@hotpop.com > wrote:

Major Man <ma***@man.co m> writes:

On 10 Aug 2004 12:32:35 GMT, "Evertjan."
<ex************ **@interxnl.net > wrote:

Google can:

http://www.google.com/search?q=scrol...age+javascript

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...ling_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:32 0px;height:200p x;overflow:auto ;">
<img src="largeImage " style="width:70 0px;height:200p x;" alt="..">
</div>
---
(nothing beats scrollbars when you want people to scroll)

Or, if you want it to move automatically:
---
<div style="width:32 0px;height:200p x;overflow:hidd en;position:rel ative">
<img nam="foo" src="../../PicA.png"
style="width:70 0px;height:200p x;position:abso lute;" alt="..">
</div>
<script type="text/javascript">
var fooImg = document.images['foo'];
var fooCtr = 0;
function scrollFooDiv() {
fooCtr++;
var xpos = Math.round(-Math.cos(Math.P I*fooCtr/50)*190)+190;
fooImg.style.le ft = -xpos+"px";
}
setInterval(scr ollFooDiv, 100);
</script>
---
/L

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(sDire ction) {

var directionX = 0, directionY = 0;

switch(sDirecti on.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.getEle mentById('Map' + i);
if (oHandle) {

oHandle.style.l eft =
parseInt(oHandl e.style.left) + (movePixels * directionX) + 'px'
oHandle.style.t op =
parseInt(oHandl e.style.top) + (movePixels * directionY) + 'px'

}
}

// recall the function until the timeout ID is cleared.
timeoutID = setTimeout("scr ollMap('" + sDirection + "')",
iTimeoutTime);
}

function stopScrollMap() {
clearTimeout(ti meoutID);
}

</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="sc rollMap('up');" ><img
src="GreenUp.gi f"></span></td><td></td></tr>
<tr><td align="center"> <span onmouseover="sc rollMap('left') ;"><img
src="GreenLeft. gif"></span></td><td><img
src="Map-full_small.gif" ></td><td align="center"> <span
onmouseover="sc rollMap('right' );"><img
src="GreenRight .gif"></span></td></tr>
<tr><td></td><td align="center"> <span
onmouseover="sc rollMap('down') ;"><img
src="GreenDown. gif"></span></td><td></td></tr>
</table>

<div id="FullMapWrap per" >
<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.getEle mentById('Map' + i);
if (oHandle) {
oHandle.style.l eft = ((i % 3) * 1000)-1000 +
'px';
oHandle.style.t op = (Math.floor(i/3) *
700)-700 + 'px';
//alert('i='+i+' left='+oHandle. style.left + '
top=' + oHandle.style.t op);
}

}
</script>
</body>
</html>