dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: simple virtual tour

  1. #1
    Join Date
    Oct 2012
    Posts
    1

    Question simple virtual tour

    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..

  2. #2
    Join Date
    Oct 2012
    Posts
    12
    CuppaTours Online apparatus formulate it undemanding, uncomplicated and most off all enjoyable for everybody to construct their own practical tours.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles