468,161 Members | 1,956 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,161 developers. It's quick & easy.

scrolling image on website

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
Jul 23 '05 #1
12 2499
Major Man wrote on 10 aug 2004 in comp.lang.javascript:
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)
Jul 23 '05 #2
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?
Jul 23 '05 #3
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.
Jul 23 '05 #5
>>>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

Jul 23 '05 #6
Major Man <ma***@man.com> 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: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;po sition: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>
---
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 23 '05 #7
On Wed, 11 Aug 2004 00:25:18 +0200, Lasse Reichstein Nielsen
<lr*@hotpop.com> wrote:
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)


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

Thanks dude, I'm gonna use this!
Jul 23 '05 #8
Lasse Reichstein Nielsen wrote on 11 aug 2004 in comp.lang.javascript:
Or, if you want it to move automatically:
---
<div style="width:320px;height:200px;overflow:hidden;po sition: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.

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

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 23 '05 #9
On Wed, 11 Aug 2004 00:25:18 +0200, Lasse Reichstein Nielsen
<lr*@hotpop.com> wrote:
Major Man <ma***@man.com> 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: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;po sition: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>
---
/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(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>
Jul 23 '05 #10
Major Man wrote:
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


By NS do you mean Netscape?

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


How do you know that? If its on the web, then you DON'T know it.
Jul 23 '05 #11
On Wed, 11 Aug 2004 00:25:18 +0200, Lasse Reichstein Nielsen
<lr*@hotpop.com> wrote:
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)


One more question for Lasse Reichstein....

Would it be possible to replace the plain scrollbar with two .gif
images (of fancy looking arrows)?

I know I'm being a pest but thank you for your patience!
Jul 23 '05 #12
Major Man <ma***@man.com> writes:
Would it be possible to replace the plain scrollbar with two .gif
images (of fancy looking arrows)?


Not easily. You could implement your own scrollbar using Javascript,
but that would introduce dependencies that are not needed, and be
likely to not work in some browsers. It's unnecessarily complicated.

Using built in scroll bars will work in most browsers, with or without
javascript enabled.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 23 '05 #13

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Vangelis Natsios | last post: by
reply views Thread by Paul Loveless | last post: by
2 posts views Thread by Sam | last post: by
7 posts views Thread by Yavuz Bogazci | last post: by
3 posts views Thread by Aaron | last post: by
1 post views Thread by gcdp | last post: by
reply views Thread by kamranasdasdas | last post: by
reply views Thread by gcreed | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.