Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Location
    Kerala, India
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    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 the view of a single image.. but i don't know how to do the remaining..

    i'm new to js.. please help me..

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    This forum is not a free coding service. As a general rule, the people helping out in this forum don't write code for others, (especially for what appears to be a commercial application), but try to help with fixing code that doesn't work. You may perhaps get someone to write this script for you, but you'll be far more likely to get help if you have made a substantial effort and written some code yourself. Then someone here will almost certainly help you correct/improve your work.


    It is your responsibility to die() if necessary….. - PHP Manual

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    surya nair (09-29-2012)

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    #tst {
      position:absolute;left:100px;top:100px;width:351px;height:263px;border:solid red 1px;
    }
    
    #tst IMG {
      position:absolute;left:0px;top:0px;width:351px;height:263px;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    image 0 - click the drivers head<br />
    image 1 - click the top left<br />
     <div id="tst" >
      <img src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" alt="room" />
     </div>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Pan Image Hot Spot (28-February-2012)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    var zxcPanImageHotSpot={
    
     init:function(o){
      var oop=this,id=o.ID,m=o.Magnify,e=o.PanEdge,ms=o.MaximumScroll,ary=o.ImageArry,obj=document.getElementById(id),img=obj.getElementsByTagName('IMG')[0],w=img.width,h=img.height;
      obj.style.overflow='hidden';
      img.style.left='0px';
      img.style.top='0px';
      img.src=ary[0][0];
      img.removeAttribute('title');
      if (ary[0][2]){
       img.title=ary[0][2];
      }
      o=this['zxc'+id]={
       obj:obj,
       img:img,
       ary:ary,
       cnt:0,
       lgth:ary.lgth-1,
       ex:[e,w-e],
       ey:[e,h-e],
       xy:[0,0],
       x:0,
       y:0,
       ud:1,
       w:w,
       h:h,
       m:m,
       ms:ms
      }
      setInterval(function(){ oop.movexy(o); },50);
      this.addevt(document,'mousemove','move',o);
      this.addevt(img,'mousemove','cursor',o);
      this.addevt(img,'mouseup','swap',o);
      this.addevt(obj,'mouseover','over',o);
      this.addevt(obj,'mouseout','over',o);
     },
    
     over:function(o,e){
      var ud=e.type=='mouseout'?1:o.m;
      o.img.style.width=o.w*ud+'px';
      o.img.style.height=o.h*ud+'px';
      o.xy=[(o.w-o.w*ud)/2,(o.h-o.h*ud)/2];
      o.img.style.left=o.xy[0]+'px';
      o.img.style.top=o.xy[1]+'px';
      o.ud=ud;
     },
    
     move:function(o,e){
      var mse=this.mse(e),p=this.pos(o.obj),x=mse[0]-p[0],y=mse[1]-p[1];
      o.x=o.ud>1?(x>0&&x<o.ex[0]?1-x/o.ex[0]:x<o.w&&x>o.ex[1]?(o.w-x-o.ex[0])/o.ex[0]:0)*o.ms:0;
      o.y=o.ud>1?(y>0&&y<o.ey[0]?1-y/o.ey[0]:y<o.h&&y>o.ey[1]?(o.h-y-o.ey[0])/o.ey[0]:0)*o.ms:0;
     },
    
     movexy:function(o,e){
      var x=parseInt(o.img.style.left),y=parseInt(o.img.style.top),x=Math.max(Math.min(x+o.x,0),o.w-o.img.width),y=Math.max(Math.min(y+o.y,0),o.h-o.img.height);
      o.img.style.left=x+'px';
      o.img.style.top=y+'px';
     },
    
     swap:function(o,e){
      if (o.img.style.cursor=='pointer'){
       o.cnt=++o.cnt%o.ary.length;
       o.img.src=o.ary[o.cnt][0];
       o.img.style.cursor='default';
       o.img.removeAttribute('title');
       if (o.ary[o.cnt][2]){
        o.img.title=o.ary[o.cnt][2];
       }
      }
     },
    
     cursor:function(o,e){
      var mse=this.mse(e),x=parseInt(o.img.style.left),y=parseInt(o.img.style.top),p=this.pos(o.obj),xx=mse[0]-p[0],yy=mse[1]-p[1],c=o.ary[o.cnt][1];
      o.img.style.cursor=xx>c[0]*o.ud+x&&xx<c[2]*o.ud+x&&yy>c[1]*o.ud+y&&yy<c[3]*o.ud+y?'pointer':'default';
     },
    
     mse:function(e){
      if (window.event){
       var docs=[document.body.scrollLeft,document.body.scrollTop];
       if (!document.body.scrollTop){
        docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
       }
       return [e.clientX+docs[0],e.clientY+docs[1]];
      }
      return [e.pageX,e.pageY];
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
     }
    
    
    }
    
    zxcPanImageHotSpot.init({
     ID:'tst',         // the unique ID name of the parent DIV.                (string)
     Magnify:2,        // the magnification.                                   (number)
     PanEdge:50,       // the distance from the edge to scroll.                (number)
     MaximumScroll:5,  // the magnification.                                   (number)
     ImageArry:[       // an array defining the image src, hot spot and title. (array)
      ['http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg',[230,145,250,165],'Winter Palace'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Listening.jpg',[0,0,50,50],'Listening']
     ]
    });
    /*]]>*/
    </script>
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    surya nair (09-29-2012)

  • #4
    New to the CF scene
    Join Date
    Sep 2012
    Location
    Kerala, India
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    This forum is not a free coding service. As a general rule, the people helping out in this forum don't write code for others, (especially for what appears to be a commercial application), but try to help with fixing code that doesn't work. You may perhaps get someone to write this script for you, but you'll be far more likely to get help if you have made a substantial effort and written some code yourself. Then someone here will almost certainly help you correct/improve your work.


    It is your responsibility to die() if necessary….. - PHP Manual
    hi philip..

    i'm not here simply to copy and paste what i get from the net..
    it's true that i've done the partial code from a lot of searches on the web..
    but it doesn't mean that i'm simply sitting on my desk and copying whatever i get from the web.. i'm new to js.. so there is a trouble for me.. if i wanted this to be done by someone else, i could have asked this question several months before..

    thank you..

  • #5
    New to the CF scene
    Join Date
    Sep 2012
    Location
    Kerala, India
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    thank you phillips for such a script.. but i'm a beginner in js.. i coudn't understand what the script does..
    i'm pasting the code i've done.. (ofcourse from the web.. but modified and added for my use)..
    ------------------------------------


    <!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 = "absolute";

    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>


    ------------------------------------

    now what i want is creating the door as a button, and as the image moves if we click on the door, it leads to the next room.. like you've done.. but i couldn't get which script of yours is used for that..

    could you please help me..??
    thank you once again for that code..


  •  

    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
    •