Scrolling images

[dee_ss2001]

Hello all

I have a number of panoramic type images that I would like to put onto my
web site. Most of them are much wider than they are tall, a couple of them
are the other way around.

I have seen a nice QuickTime thing where you can control where you look in
the window by just holding onto the image with your cursor and moving the
mouse around. This looks quite good, but I'm not sure how big the file sizes
would be and I don't like people having to have plugins installed to see my
site.

So, I thought a simple scroll bar along one axis or the other of the image
may be the way to go.

Here's what I've done a quick test with today:

<iframe src="a.jpg" name="frame1" scrolling="auto" frameborder=0
align="center" height="350px" width="95%" marginheight=0 marginwidth=0>
</iframe>

and it works ok, but the scroll bars don't seem to work quite as I'd want
them to. For example, the image I was using here was only 350 pixels high,
but the vertical scroll bar still showed up.

Do you know a way around this?

Would you use this 'iframe' method, or is there something else you'd
suggest?

Thanks
Damian
www.daminator.com

 

[mscir]

Hello all

I have a number of panoramic type images that I would like to put onto my
web site. Most of them are much wider than they are tall, a couple of them
are the other way around.

<snip>

I'd look at using a div, you can control which scroll bar shows up.
Maybe try this approach, it shows a horizontal scrollbar only in my ie6,
netscape 7.1, firefox 0.8. The web page says it will work in Opera too
but I don't have Opera to test it. To change to vertical scrollbars only
change overflow-x to overflow-y and -horizontal to -vertical:

http://snipsnap.org/space/comment-2003-01-16-4

"The attribute -moz-scrollbars-horizontal is an mozilla spezific one.
More info at: XULPlanet. The parameter overflow-x is IE spezific. The
combination works in both browsers. Opera and other browsers don't know
the parameter overflow-x nor the attribute -moz-scrollbars-horizontal.
But if we put an overflow: auto before, is works in Opera too."

<style type="text/css">
div {
padding: 0;
width: 400px;
height: 483px;
overflow: auto; //opera
overflow-x: scroll; //ie
overflow: -moz-scrollbars-horizontal; //moz
}
img {
border: 0;
}
</style>

<div>
<img src="9725a.jpg" width="640" height="483">
</div>

Mike

 

[Richard]

Hello all

I have a number of panoramic type images that I would like to put onto my
web site. Most of them are much wider than they are tall, a couple of them
are the other way around.

I have seen a nice QuickTime thing where you can control where you look in
the window by just holding onto the image with your cursor and moving the
mouse around. This looks quite good, but I'm not sure how big the file sizes
would be and I don't like people having to have plugins installed to see my
site.

So, I thought a simple scroll bar along one axis or the other of the image
may be the way to go.

Here's what I've done a quick test with today:

<iframe src="a.jpg" name="frame1" scrolling="auto" frameborder=0
align="center" height="350px" width="95%" marginheight=0 marginwidth=0>
</iframe>

and it works ok, but the scroll bars don't seem to work quite as I'd want
them to. For example, the image I was using here was only 350 pixels high,
but the vertical scroll bar still showed up.

Do you know a way around this?

Would you use this 'iframe' method, or is there something else you'd
suggest?

Thanks
Damian
www.daminator.com

Use a division and use scroll:auto.

If the height is ok, no vertical scroll bar shows up, only the horizontal.

 

[GeoffC]

Hello all

I have a number of panoramic type images that I would like to put onto my
web site. Most of them are much wider than they are tall, a couple of them
are the other way around.

I have seen a nice QuickTime thing where you can control where you look in
the window by just holding onto the image with your cursor and moving the
mouse around. This looks quite good, but I'm not sure how big the file sizes
would be and I don't like people having to have plugins installed to see my
site.

<snip>

If Javascript is acceptable and you are prepared to invest the effort
(a lot, actually) to master it's use with advanced CSS, you might
consider animating the panoramas as I did on our Walking site. We
found that the effort involved in getting the panorama player working
was very worthwhile as the result was really appreciated by our
readers.

I wanted a method that did not involve downloading any additional
software or browser plugins onto the reader's PC, which meant
implementing it in Javascript. The resulting player works on Win /
Linux / Apple Mac platforms and in the latest IE / Moz / Opera / NS
browsers.

To decide if this is a viable route, see examples of full (360deg) and
partial pans at:

http://v-g.me.uk/Trips/T0624/T0624.htm

Regards

-- GeoffC

-- GeoffC

 

[Kris]

I have a number of panoramic type images that I would like to put onto my
web site. Most of them are much wider than they are tall, a couple of them
are the other way around.

I have seen a nice QuickTime thing where you can control where you look in
the window by just holding onto the image with your cursor and moving the
mouse around. This looks quite good, but I'm not sure how big the file sizes
would be and I don't like people having to have plugins installed to see my
site.

<snip>

If Javascript is acceptable and you are prepared to invest the effort
(a lot, actually) to master it's use with advanced CSS, you might
consider animating the panoramas as I did on our Walking site.[/QUOTE]

To the OP, this may be of use:
<http://www.csszengarden.com/javascript/?cssfile=/javascript/beauty.css>

 

[Toby A Inkster]

http://v-g.me.uk/Trips/T0624/T0624.htm

Wow. I think that's the first time I've seen a Javascript moving stuff
about and actually liked the effect!

One suggestion might be to have the speed +/- buttons set a cookie in the
Javascript and then read the cookie again for the next time the visitor
views a panorama -- so that the site remembers the visitor's preferred
speed.

 

[GeoffC]

Wow. I think that's the first time I've seen a Javascript moving stuff
about and actually liked the effect!

One suggestion might be to have the speed +/- buttons set a cookie in the
Javascript and then read the cookie again for the next time the visitor
views a panorama -- so that the site remembers the visitor's preferred
speed.

Thanks Toby, the cookie idea sounds good. I knew how to do that once,
must brush up again.

Regards

-- GeoffC

 

[dee_ss2001]

Thanks everyone.

I'll look into it again when I have a little time.