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 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2009
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    On the moving of the mouse preview should other way

    area of an image on which the mouse is positioned should only show in the preview, not the full image .. is this posible if yes how ??


    Plz suggest me something ...........

    Samaiya

  • #2
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    375
    Thanks
    9
    Thanked 55 Times in 54 Posts
    Something like below?
    PHP Code:
    <html>
    <
    head>

    <
    style type="text/css">
    #page{
      
    floatleft;
      
    margin32px;
    }

    #guide{
      
    floatleft;
      
    width128px;
      
    height128px;
      
    border1px dashed black;
      
    text-aligncenter;
    }

    #arrow{
      
    floatleft;
      
    font-familymonospace;
    }

    #preview{
      
    floatleft;
      
    width320px;
      
    border1px solid black;
    }

    #viewport{
      
    width256px;
      
    height256px;
      
    margin-top32px;
      
    margin-left32px;
      
    overflowhidden;
    }

    #image1{
      
    positionrelative;
      
    top0px;
      
    left0px;
    }

    #preview p{
      
    margin-left32px;
      
    margin-right32px;
    }
    </
    style>

    <
    script type="text/javascript">
    var
      
    zom=4;

    function 
    onmousemovef(ev){
      var
        
    a=ev;
        
    b=document.getElementById("image1");
        
    c="("+a.clientX+","+a.clientY+")";
      
    with (b.style){
        
    left=-Math.round((a.clientX-32)*zom)+"px";
        
    top=-Math.round((a.clientY-32)*zom)+"px";
      }
    }

    function 
    initf(){
      var
        
    a=document.getElementById("guide");
        
    b=document.getElementById("image1");
      
    with (a){
        
    addEventListener("mousemove",onmousemovef,true);
        
    style.width=Math.round((b.clientWidth-256)/zom)+"px"//adjust guide dimension to image1.
        
    style.height=Math.round((b.clientHeight-256)/zom)+"px";
      }
    }

    function 
    donef(){
      
    document.getElementById("guide").removeEventListener("mousemove",onmousemovef,true);
    }

    </script>
    </head>

    <body onload="javascript:initf();" onunload="javascript:donef();">
    <div id="page">
      <div id="guide"></div>
      <div id="arrow">----------&gt;</div>
      <div id="preview">
        <div id="viewport">
          <img id="image1" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Starry_Night_Over_the_Rhone.jpg/800px-Starry_Night_Over_the_Rhone.jpg" 
            alt="Vincent van Gogh's Starry Night Over the Rhone, painted in September 1888 at Arles, depicts the Rhône River at night."
            title="Vincent van Gogh's Starry Night Over the Rhone, painted in September 1888 at Arles, depicts the Rhône River at night."
          />
        </div>
        <p>Vincent van Gogh's Starry Night Over the Rhone, painted in September 1888 at Arles, depicts the Rhône River at night.
          Source: <a href="http://en.wikipedia.org/wiki/File:Starry_Night_Over_the_Rhone.jpg">en.wikipedia.org</a>
        </p>
      </div>
    </div>
    </body>
    </html> 


  •  

    Posting Permissions

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