473,320 Members | 2,098 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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 2694
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: delong | last post by:
Hi I am trying to display a large image on the form and make the form scrollable. My image is about 4200 x 7000 pixel. private void Form1_Paint(object sender,...
1
by: Vangelis Natsios | last post by:
I want to create a page with a scrolling image that will cause different messages to appear on another part of the page (say, another <div>) as the image will scroll. Imagine something like this: ...
0
by: Paul Loveless | last post by:
Hi all. I have a user control that contains a picturebox within a panel with the panel set to autoscroll the picturebox. One thing that I have noticed with the default functionality is when you...
2
by: Sam | last post by:
Hope someone can help... I have an image on the page which i have made scrollable with the following code: <div id="Layer1" style="LEFT: 8px; TOP: 368px; height: 180px; width:780px; ...
7
by: Yavuz Bogazci | last post by:
i have the following problem: my customer wants to show some informations in a WinForm. He has Images and Textelements with are connected. It should look like this: scroll << - ... Image +...
3
by: Aaron | last post by:
I'm trying to parse a table on a webpage to pull down some data I need. The page is based off of information entered into a form. when you submit the data from the form it displays a...
0
by: ton | last post by:
Hi, I have an Image which is dark grey/black, at the top a white line, at the left site a white line as well. At 192 px from the left of the screen I position a DIV with this image as the...
7
by: jeddiki | last post by:
I want to check the size of an image file before I write it. If it is a certain size, then I won't write it. Can I check the future size of the file by using strlen() on the...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.