image clipping problem

Andy Baxter

hello,

I'm writing a panoramic image viewer in html / javascript. The idea is I
have a div with two identical panoramic photographs embedded in it. The
clipping on the div is set to make it a viewport onto the images. Then I
use javascript to make the two images scroll through the viewport - the
second image is just there to fill the gaps when the first scrolls off the
screen. They are seamless 360 degree panoramas, so this gives the illusion
of a seamless scroll around the whole scene.

You can see a test version of the page at:
http://lofty.dyndns.info/pano/pano-test.html

The html code is like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Panora ma-test</title>
<script type="text/javascript" src="js/dojo/dojo.js"></script>
<script type="text/javascript" src="js/pano.js"></script>
</head>
<body>
<h1 id="heading">Pa norama Test
</h1>
<p id="message1">& nbsp;</p>
<p id="message2">& nbsp;</p>
<div style="position : relative; top: 0px; left: 0px;">
<div id="panoDiv"
style="position : absolute; top: 0px; left: 30px; width: 700px; height:
400px; clip: rect(0px, 700px, 400px, 0px);"><img
id="panoImage1 "
style="position : absolute; width: auto; height: 400px; left: 0px;" alt=""
src="pano2.jpg" ><img id="panoImage2 " style="position : absolute; width:
auto; height: 400px; left: 0px;" alt="" src="pano2.jpg" ></div>
</div>
<p> </p>
</body>
</html>

This is mostly working - the only problem I'm having is that the browser's
(Mozilla firefox) is setting the page width to be the width of the clipped
images, not the width of the div viewport. I.e. the horizontal
scrollbar appears even though the viewport is entirely within the
browser window. This is likely to cause me problems later on when I want
to embed the image viewer inside other page elements, so I'm trying to get
it fixed now.

does anyone have any idea how to fix this using html/css? (I'm already
clipping the images inside the javascript code, using img.style.clip= "rect(....) ")

--
http://www.niftybits.ukfsn.org/

remove 'n-u-l-l' to email me. html mail or attachments will go in the spam
bin unless notified with [html] or [attachment] in the subject line.

May 26 '06 #1

Subscribe Reply

3412

Spartanicus

Andy Baxter <ne***@earthson g.null.free-online.co.uk> wrote:

http://lofty.dyndns.info/pano/pano-test.html

Your concept is fatally flawed:

Size of main page:
1046 bytes
Number of inline elements:
1 ( 1)
Size of inline elements:
972103 bytes

Waaayyyy to much. Browsers also do a poor job at resizing images.

--
Spartanicus

May 26 '06 #2

Andy Baxter

Spartanicus said:

Andy Baxter <ne***@earthson g.null.free-online.co.uk> wrote:
http://lofty.dyndns.info/pano/pano-test.html
Your concept is fatally flawed:

How come it works fine on my system (mozilla firefox on linux)? (Apart
from the bug I've mentioned).
Size of main page:
1046 bytes
Number of inline elements:
1 ( 1)
Size of inline elements:
972103 bytes

Waaayyyy to much. Browsers also do a poor job at resizing images.

I'm going to build in an option to choose what resolution you want to view
the panorama at:

400 pixels high / 200 pixels high / 100 pixels high. This should take care
of any bandwidth issues (e.g. for modem users).

--
http://www.niftybits.ukfsn.org/

remove 'n-u-l-l' to email me. html mail or attachments will go in the spam
bin unless notified with [html] or [attachment] in the subject line.

May 26 '06 #3

Spartanicus

Andy Baxter <ne***@earthson g.null.free-online.co.uk> wrote:

Size of main page:
1046 bytes
Number of inline elements:
1 ( 1)
Size of inline elements:
972103 bytes

Waaayyyy to much. Browsers also do a poor job at resizing images.

I'm going to build in an option to choose what resolution you want to view
the panorama at:

400 pixels high / 200 pixels high / 100 pixels high. This should take care
of any bandwidth issues (e.g. for modem users).

I doubt it, but feel free to try, come back when you've done that. Also
note that this belongs in c.i.w.a.stylesh eets

--
Spartanicus

May 26 '06 #4

Andy Baxter

Spartanicus said:

Andy Baxter <ne***@earthson g.null.free-online.co.uk> wrote:
Size of main page:
1046 bytes
Number of inline elements:
1 ( 1)
Size of inline elements:
972103 bytes

Waaayyyy to much. Browsers also do a poor job at resizing images.

I'm going to build in an option to choose what resolution you want to view
the panorama at:

400 pixels high / 200 pixels high / 100 pixels high. This should take care
of any bandwidth issues (e.g. for modem users).

I doubt it, but feel free to try, come back when you've done that. Also
note that this belongs in c.i.w.a.stylesh eets

How is doing that going to solve the image clipping problem I'm looking
for help on???

I'm planning to do it, but later once I've got the basic thing working.

--
http://www.niftybits.ukfsn.org/

remove 'n-u-l-l' to email me. html mail or attachments will go in the spam
bin unless notified with [html] or [attachment] in the subject line.

May 26 '06 #5

Spartanicus

Andy Baxter <ne***@earthson g.null.free-online.co.uk> wrote:

I doubt it, but feel free to try, come back when you've done that. Also
note that this belongs in c.i.w.a.stylesh eets

How is doing that going to solve the image clipping problem I'm looking
for help on???

This isn't a help desk. I for one am not willing to spend time on what
looks like a fatally flawed concept.

--
Spartanicus

May 26 '06 #6

Andy Baxter

Spartanicus said:

Andy Baxter <ne***@earthson g.null.free-online.co.uk> wrote:
I doubt it, but feel free to try, come back when you've done that. Also
note that this belongs in c.i.w.a.stylesh eets

How is doing that going to solve the image clipping problem I'm looking
for help on???

This isn't a help desk. I for one am not willing to spend time on what
looks like a fatally flawed concept.

I still don't get why this concept is 'fatally flawed'. The only reason I
can see why images this large are a problem is because of the download
time, but even for the extra-large version I'm working with at the moment,
the download takes about 20-30 secs on a broadband connection, which is
acceptable to me. I accept that on a modem, this image would be too slow,
but then for that, I'm planning to give people a choice of using lower
resolution images. E.g.

100 pixels high gives an 11K file, which would be fine on a 56K modem
(about 3-4 seconds download)

170 pixels high gives a 31K file, which would still be OK over a modem.

400 pixels high at 50% quality gives a 182K file, which would be fine over
broadband.

I still don't see why there's really a problem with this.

--
http://www.niftybits.ukfsn.org/

remove 'n-u-l-l' to email me. html mail or attachments will go in the spam
bin unless notified with [html] or [attachment] in the subject line.

May 27 '06 #7

Spartanicus

Crossposted and follow up set to
comp.infosystem s.www.authoring.stylesheets

Andy Baxter <ne***@earthson g.null.free-online.co.uk> wrote:

I still don't get why this concept is 'fatally flawed'. The only reason I
can see why images this large are a problem is because of the download
time, but even for the extra-large version I'm working with at the moment,
the download takes about 20-30 secs on a broadband connection, which is
acceptable to me. I accept that on a modem, this image would be too slow,
but then for that, I'm planning to give people a choice of using lower
resolution images. E.g.

100 pixels high gives an 11K file, which would be fine on a 56K modem
(about 3-4 seconds download)

170 pixels high gives a 31K file, which would still be OK over a modem.

400 pixels high at 50% quality gives a 182K file, which would be fine over
broadband.

I didn't think that the image size would come down enough, but having
tried it is indeed acceptable.

I don't have an understanding of the clip property, nor of javascript,
but afaics the issue you referred to doesn't relate to either.

Using a reduced test case, setting overflow to hidden seems to resolve
your problem: http://homepage.ntlworld.ie/spartanicus/panorama.htm
I had to use an extra div due to browser bugs, the above demo seems to
work in the big three (IE, Opera and Gecko based browsers).

--
Spartanicus

May 27 '06 #8

Spartanicus

Andy Baxter <ne***@earthson g.null.free-online.co.uk> wrote:

I still don't get why this concept is 'fatally flawed'. The only reason I
can see why images this large are a problem is because of the download
time

Btw, something else you might want to consider. Your demo causes my
system to become very slow. Each image expands to 6.6Mb uncompressed,
two of them makes for 13.2Mb. Maybe it's due to the age of my system,
but it can't handle that properly.

--
Spartanicus

May 27 '06 #9

Andy Baxter

Spartanicus said:

Andy Baxter <ne***@earthson g.null.free-online.co.uk> wrote:
I still don't get why this concept is 'fatally flawed'. The only reason I
can see why images this large are a problem is because of the download
time

Btw, something else you might want to consider. Your demo causes my
system to become very slow. Each image expands to 6.6Mb uncompressed,
two of them makes for 13.2Mb. Maybe it's due to the age of my system,
but it can't handle that properly.

I've built the image resizing bit now - you can choose between various
sizes: 400, 250, 160 and 100 pixels high, which should be good enough for
most people.

Many thanks for your help.

andy

--
http://www.niftybits.ukfsn.org/

remove 'n-u-l-l' to email me. html mail or attachments will go in the spam
bin unless notified with [html] or [attachment] in the subject line.

May 27 '06 #10

Similar topics

4891

Clipped image with dynamic clip change

by: RIck Measham | last post by:

I pop up a window with a picture in it, however the picture can be very large. So here's what I want to do: Pop up a mindow with the picture clipped to the size of the window, then place a scaled version of the picture on top of it. Thus it will look like this: +------------------------+ | WINDOW | +------------------------| | | | |

Javascript

4687

clipping an image

by: Jeff Thies | last post by:

I'm having trouble clipping an image. My understanding is that this is all I should need: <img src="test_img.jpg" style="clip: rect(10px 10px 10px 10px)" alt="alt"> Although I've seen this as a comma seperated list. This has no effect whatesoever. What am I doing wrong? Jeff

HTML / CSS

31807

How to Clip a portion of an Image

by: Anand Ganesh | last post by:

HI All, I have an Image. I want to clip a portion of it and copy to another image. How to do this? I know the bounding rectangle to clip. Any suggestions please. Thanks for your time and help. Regards

C# / C Sharp

2034

Image viewer with a twist

by: Troy | last post by:

Hi all, Im a little new to ASP.NET. I'm looking to create an image viewer that zooms in, pretty common. But I need to draw a box on the 1:1 scale image and 'zoom in' on another picture box. The box outlining the zoom area would change in size according to the level of zoom of course. The help I need is how to get the target box to appear over the 1:1 scale image. I want it to be able to be dragged to a new location in the full

ASP.NET

2516

Troubled saving a clipped region from an image to disk as transparent

by: Mark Denardo | last post by:

Hi, I need some expert GDI+ person to help me with my RoundOffImage Function: What I'm trying to do is take in an image, crop off the edges around an ellipse region I set up, and then return the cropped image from the function. I sort of have this working, but not thoroughly. If I take the output image of this function and draw it on my form it shows the clipped image as transparent as I am wanting it. But if I take that image and...

Visual Basic .NET

1301

IE vs FF: image clipped by IE

by: Jim Moe | last post by:

Hello, URL: <http://tucsonwomenschorus.com/> Firefox and Opera both show the image extended to the right of the content. IE6 does not; it clips it at the boundary of the content area. Have I made a mistake? Or Is there a workaround for this? -- jmm (hyphen) list (at) sohnen-moe (dot) com (Remove .AXSPAMGN for email)

HTML / CSS

2285

Move an image within a clip region

by: peter.chase | last post by:

In my Web application, a have an image within a DIV. One of the allowed user gestures is to drag the image with the mouse. When dragging, parts of the image that would otherwise be displayed outside the DIV should be clipped. I had no trouble at all achieving this on FireFox and Safari. But I can't get Internet Explorer to do the clipping; it always shows the whole image, including the bits outside the DIV. Here's the HTML: -

Javascript

5669

background-image flicker

by: seamlyne | last post by:

The first method I ever used for multiple state buttons was to create a graphic for each button for each state: AboutUs_on, AbooutUs_over, AboutUs_out, etc. That works great when there are just a few buttons. I'm creating interfaces now with many more buttons than "just a few". I solved the maintenance problem by having generic button images, one for each state, and having them be background images for text containers, DIVs in this...

HTML / CSS

4419

image buttons

by: tshad | last post by:

Is there a way to display images (imageButtons or linkbuttons for instance) as a max size (200px by 50px) and not have it stretch the image? What I want to be able to do is limit the real estate an image can take up but not stretch the image if it happens to be 150px by 40. I am doing commands such as: <asp:ImageButton ID="CompanyLogo" onClick="Image_Click" Width="200px" Height="50px" runat="server"/>

ASP.NET

8944

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9306

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

9234

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

9180

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

8186

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

6733

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

4548

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

4805

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

2177

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General