SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: Is it possible?

  1. #1
    SitePoint Member
    Join Date
    Jul 2004
    Location
    Milky way
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is it possible?

    Hi

    Is it possible to build a javascript page, that would display an image, and over a image would be a resizable rectangle(that you could move over the picture) and on clik you would get the image that is within the rectangle?

    I have build a similar thing in php but you have to insert the coordinates maualy and its not so user friendly.


    Does anybody know for good tutorials?


    Thanks


    zinko

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is this anything like what you want?

    tested with IE & MozFF


    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>
    <
    script language="JavaScript" type="text/javascript">
    <!--
    // Cover Element ce3Part1 (12-03-2005)
    // by Vic Phillips http:www.vicsJavaScripts.org.uk

    // Customising Variables
    var ce3ZIndex=1;
    var 
    ce3Top=10;
    var 
    ce3Left=10;
    var 
    ce3Width=80;
    var 
    ce3Height=32;
    var 
    ce3BGColor='';
    var 
    ce3TxtAlign='center';
    var 
    ce3Image='http://vicsjavascripts.org.uk/StdImages/TeddyY.gif';
    var 
    ce3Border='solid black 0px';
    var 
    ce3Float='Yes';
    var 
    ce3Title='';


    ce3Title+='<img style="position:absolute;z-index:1;top:0px;left:0px;" src="'+ce3Image+'" width="100%" height="100%" >';
    ce3Title+='<div style="position:absolute;width:'+ce3Width+'px;z-index:2;top:0px;left:0px;text-align:center;font-Size:12px;" >Image Viewer<br>Drag Me</div>';

    //-->
    </script>

    <script language="JavaScript" type="text/javascript">
    <!--
    // Cover Element ce3Part2 (12-03-2005)
    // by Vic Phillips http:www.vicsJavaScripts.org.uk

    // DO NOT change
    var ce3dragX=0;
    var ce3dragY=0;
    var ce3K=1;
    var ce3mseX,ce3mseY,ce3Obj,ce3Img,ce3C,ce3Over,ce31;
    var ce3Ary=new Array();

    function ce3Init(){
     ce3Obj=document.createElement('DIV');
     document.getElementsByTagName('BODY')[0].appendChild(ce3Obj);
     ce3ObjS=ce3Obj.style;
     ce3ObjS.position='absolute';
     ce3ObjS.zIndex=ce3ZIndex;
     ce3ObjS.top=ce3Top+'px';
     ce3ObjS.left=ce3Left+'px';
     ce3ObjS.width=ce3Width+'px';
     ce3ObjS.height=ce3Height+'px';
     ce3ObjS.backgroundColor=ce3BGColor;
     ce3ObjS.textAlign=ce3TxtAlign;
     ce3ObjS.border=ce3Border;
     ce3Obj.innerHTML=ce3Title;
     if (document.all){
      ce3ObjS.cursor='hand';
      ce3Obj.onmousedown=function(){ ce3MseDown(event); }
     }
     else {
      ce3ObjS.cursor='pointer';
      ce3Obj.setAttribute('onmousedown','javascript:ce3MseDown(event);');
     }
     if (ce3Float=='Yes'){
      window.onscroll=function(){ ce3ScrollTop(1); }
     }
     ce3objs=document.getElementsByTagName('*');
     for (ce30=0;ce30<ce3objs.length;ce30++){
      if (ce3objs[ce30].title.charAt(0)=='%'){
       ce3Ary[ce3Ary.length]=ce3objs[ce30];
       ce3objs[ce30].img=ce3objs[ce30].title.split('^')[1];
       ce3objs[ce30].title=ce3objs[ce30].title.substring(1,ce3objs[ce30].title.length);
       ce3objs[ce30].title=ce3objs[ce30].title.split('^')[0];
      }
     }
    }

    function ce3MseDown(event,ce3obj) {
     document.onmousemove=function(){ ce3Drag(event); }
     document.onmouseup=function(){ ce3MseUp(); }
     document.onclick=function(){ ce3ShowImg(); }
     ce3Drag(event);
     ce3dragX=ce3mseX-ce3Obj.offsetLeft;
     ce3dragY=ce3mseY-ce3Obj.offsetTop;
    }

    function ce3Drag(event){
     if(!event) var event=window.event;
     if (document.all){ ce3mseX=event.clientX; ce3mseY=event.clientY+ce3ScrollTop(0); }
     else { ce3mseX=event.pageX; ce3mseY=event.pageY; }
     if (ce3dragX){
      ce3ObjS.left=(ce3mseX-ce3dragX)+'px';
      ce3ObjS.top=(ce3mseY-ce3dragY)+'px';
      ce3Look();
     }
    }

    function ce3MseUp(){
     document.onmousemove=null;
     ce3Drag(event);
     ce3dragX=0;ce3dragY=0;
    // ce3Top=ce3Obj.offsetTop-ce3ScrollTop(0);
    }

    function ce3ShowImg(){
     if (ce3Img){
      ce3Obj.innerHTML='<img id="ce3I" src="'+ce3Img+'" >';
      ce3Obj.style.height=(document.getElementById('ce3I').offsetHeight)+'px'
      ce3Obj.style.width=(document.getElementById('ce3I').offsetWidth)+'px'
      ce3Obj.style.left=(ce3FLeft(ce3Over)-(ce3Obj.offsetWidth-ce3Over.offsetWidth)/2)+'px';
      ce3Obj.style.top=(ce3FTop(ce3Over))+'px';
     }
    }

    function ce3Look(){
     ce3C=1;
     for (ce30=0;ce30<ce3Ary.length;ce30++){
      if ((ce3Obj.offsetTop+ce3Obj.offsetHeight>ce3FTop(ce3Ary[ce30])&&ce3Obj.offsetTop<ce3FTop(ce3Ary[ce30])+ce3Ary[ce30].offsetHeight)&&(ce3Obj.offsetLeft+ce3Obj.offsetWidth>ce3FLeft(ce3Ary[ce30])&&ce3Obj.offsetLeft<ce3FLeft(ce3Ary[ce30])+ce3Ary[ce30].offsetWidth)){
       ce3C=0;
       if (ce3K){
        ce3K=0;
        ce3Over=ce3Ary[ce30];
        ce3Img=ce3Ary[ce30].img;
        ce3Obj.innerHTML=ce3Ary[ce30].title;
       }
      }
     }
     if (ce3C&&!ce3K){
      ce3K=1;
      ce3Img=null;
      ce3Obj.innerHTML=ce3Title;
      setTimeout('ce3Pos()',200);
     }
    }

    function ce3Pos(){
     ce3Obj.style.height=(ce3Height)+'px'
     ce3Obj.style.width=(ce3Width)+'px'
     ce3Obj.style.top=(ce3mseY-ce3Height/2)+'px'
     ce3Obj.style.left=(ce3mseX-ce3Width/2)+'px'
     ce3Top=ce3Obj.offsetTop-ce3ScrollTop(0);
     ce3dragX=0;ce3dragY=0;
    }

    function ce3FLeft(ce3){
     ce3ObjLeft=ce3.offsetLeft;
     while(ce3.offsetParent!=null){
      ce3ObjParent=ce3.offsetParent;
      ce3ObjLeft+=ce3ObjParent.offsetLeft;
      ce3=ce3ObjParent;
     }
     return ce3ObjLeft;
    }

    function ce3FTop(ce3){
     ce3ObjTop=ce3.offsetTop;
     while(ce3.offsetParent!=null){
      ce3ObjParent=ce3.offsetParent;
      ce3ObjTop+=ce3ObjParent.offsetTop;
      ce3=ce3ObjParent;
     }
     return ce3ObjTop;
    }

    function ce3ScrollTop(ce3){
     ce3st=0;
     if (ce3Float!='Yes'){ return ce3st; }
     if (!document.all){ ce3st=window.pageYOffset; }
     else if (!document.body.scrollTop){ ce3st=document.documentElement.scrollTop; }
     else { ce3st=document.body.scrollTop; }
     if (ce3){
      ce3ObjS.top=(ce3Top+ce3st)+'px';
     }
     return ce3st;
    }

    //-->
    </script>


    </head>

    <body onload="ce3Init();" >
    <form name=Show id=Show style="position:absolute;visibility:visible;top:450px;left:0px;" >
    <input type=text size=100 name=Show1 >
    <input type=text size=10 name=Show2 >
    <input type=text size=10 name=Show3 >
    <input type=text type=text size=10 name=Show4 >
    <input type=text type=text size=10 name=Show5 >
    <input type=text size=10 name=Show6 >
    </form>
    <script>
     vic=0;
     document.Show.Show1.value='';
    </script>
    <center>
    <br>

    <br>
    Using Script 'ce3' (Drag Panel)<br>
    <br>
    <br>
    <img title="%Click to Enlarge Image One^http://www.vicsjavascripts.org.uk/StdImages/One.gif" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100"
    >
    </center>
    <br>
    <br>
    <center>
    <br>
    <br>
    <br>
    <img title="%Click to Enlarge Image Three^http://vicsjavascripts.org.uk/StdImages/Three.gif" src="http://vicsjavascripts.org.uk/StdImages/Three.gif" width="100" height="50"
    >
    </center>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </body>

    </html> 
    Last edited by vwphillips; Mar 28, 2005 at 12:34.


Bookmarks

Posting Permissions

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