...

View Full Version : Javascript QuicktimVR



x_goose_x
08-02-2002, 03:10 AM
Just something I thought I'd give a try. It's like QuicktimeVR but JS based. So far it doesn't loop back at the end of the image to simulate the whole 360 degrees (panoramic only).

Tested in IE6 and Moz 1.0



<html>

<head>

<META HTTP-EQUIV="imagetoolbar" CONTENT="no">

<script>

var ie=document.all
var ns6=document.getElementById&&!document.all

box_w = 500;
box_h = 150;
img_w = 6356; //specify image dimensions. Must be larger than box_w
img_h = 243;
image = "file.jpg";

drag_go = false;

function loader() {
f = 0;
if (img_w<box_w||img_w<box_w) {
alert("Invalid image width/height!");
window.stop();
}
max_y = img_w-box_w;
max_x = img_h-box_h;
document.getElementById("box").style.width = box_w;
document.getElementById("box").style.height = box_h;
document.getElementById("imag").src = image;
document.getElementById("imag").style.left = -((img_w-box_w)/2);
document.getElementById("imag").style.top = -((img_h-box_h)/2);
}

function mouse(e) {
if (ns6) {
cur_x = e.clientX;
cur_y = e.clientY;
}else if (ie) {
cur_x = event.clientX;
cur_y = event.clientY;
}
return false;
}

function drag() {
xxx = cx-cur_x;
yyy = cy-cur_y;
xxxx = (parseInt(document.getElementById("imag").style.top)+(yyy/5));
yyyy = (parseInt(document.getElementById("imag").style.left)+(xxx/5));
if (xxxx<=-max_x) {
document.getElementById("imag").style.top = -max_x;
}else if (xxxx>=0) {
document.getElementById("imag").style.top = 0;
}else{
document.getElementById("imag").style.top = xxxx;
}
if (yyyy<=-max_y) {
document.getElementById("imag").style.left = -max_y;
}else if (yyyy>=0) {
document.getElementById("imag").style.left = 0;
}else{
document.getElementById("imag").style.left = yyyy;
}
//document.getElementById("imag").style.left = yyyy;
if (drag_go) {
setTimeout("drag()",1);
}
}

document.onmouseup=new Function("drag_go=false;");

</script>

</head>

<body onload="setTimeout('loader()',200);" onmousemove="mouse(event); return false;">

<div style="overflow: hidden;" id="box" onmousedown="drag_go=true; cx=cur_x; cy=cur_y; drag();">
<img id="imag" style="position: relative; top: 0; left: 0;">
</div>

</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum