|
Posted by Andy Baxter on May 26, 2006, 9:51 am
Please log in for more thread options
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>Panorama-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">Panorama Test
</h1>
<p id="message1"> </p>
<p id="message2"> </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.
| 
XML Sitemap