simple virtual tour

**newbie..** · 10-05-2012, 12:19 AM

hi.. how are you all..??

i wanted to make a program for a simple virtual tour.. say we have 2 images of rooms.. the program loads the first room's image.. the direction of the image movement is adjusted with the mouse movement.. there is a button on the door of the room.. clicking on that door button leads to the virtual view of the next room.. ie the second room's image is loaded..

i've searched a lot and thus i managed to do something.. i'm pasting the code here..

//--------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>virtual tour</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
</head>

<body>

<div id="myDiv" style="height:400px; width:400px;"><img id="myImg" src="image01.jpg"/></div>
<button style="position:absolute; top:420px; left:300px" onclick="myFunction()">next room</button>
<script type="text/javascript">simpleTour("myDiv", "image01.jpg");
var flag = 1;
function simpleTour(divId, imageUrl){
show360(divId, imageUrl , 200, 20 , 1);
}

function show360(divId, imageUrl, imageWidthInPixels, moveIntervalInMS, moveSteps){

document.getElementById( divId ).style.backgroundImage = 'url'+'(' + imageUrl + ')';

document.getElementById( divId ).style.position = "absolote";

document.getElementById( divId ).innerHTML = '<div style="width:20%; height:100%;position:absolute;"'
+ ' onmouseover="show360Direction(\'' + divId + '\',-2);"></div>'
+ '<div style="width:20%; height:100%;position:absolute;left:20%"'
+ ' onmouseover="show360Direction(\'' + divId + '\',-1);"></div>'
+ '<div style="width:40%; height:100%;position:absolute;left:40%;"'
+ ' onmouseover="show360Direction(\'' + divId + '\',0);"></div>'
+ '<div style="width:20%; height:100%;position:absolute;left:60%;"'
+ ' onmouseover="show360Direction(\'' + divId + '\',1);"></div>'
+ '<div style="width:20%; height:100%;position:absolute;right:0px;"'
+ ' onmouseover="show360Direction(\'' + divId + '\',2);"></div>';

show360Direction( divId, 1 );

setTimeout( "move360( '" + divId + "', " + moveSteps + ", 0, "
+ imageWidthInPixels + ", " + moveIntervalInMS +" );", moveIntervalInMS );

}

function show360Direction( divId, iDirection ) {
eval( "show360_" + divId + " = " + iDirection ) ;
}

function move360( divId, iDirectionStep, deltaX, imageWidth, refreshInterval ){

deltaX += eval( "show360_" + divId ) * iDirectionStep;

document.getElementById( divId ).style.backgroundPosition = deltaX + "px 0px";

var evalFunc = "move360( '" + divId + "'"+ ", " + iDirectionStep+ ", " + deltaX+ ", " + imageWidth+ ", " + refreshInterval+ ");";

setTimeout( evalFunc, refreshInterval );

}

function myFunction()
{
if (flag == 1) {
simpleTour ("myDiv", "image02.jpg");
flag = 2;
} else if (flag == 2){
simpleTour ("myDiv", "image01.jpg");
flag = 1;
}
}

</script>

</body>
</html>

//--------------

i wanted the doors to have the button like property of navigating to the next room.. i'm new to js.. please help me..

**nicksaiz** · 10-05-2012, 05:32 AM

CuppaTours Online apparatus formulate it undemanding, uncomplicated and most off all enjoyable for everybody to construct their own practical tours.

Thread: simple virtual tour

Thread Tools

Display

simple virtual tour

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions