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 to the CF scene
    Join Date
    Jul 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problems with OnClick and OnMosueOver;

    Hi I have a code that looks like this.

    <div id="id1" onClick="return showPos();" onMouseOver="return DrawRect();">Hello World</div>

    <script>
    var FirstClick = true;
    function showPos(){
    if(FirstClick){
    ....
    }else{
    ....
    }
    FirstClick = !FirstClick;
    return true;
    }

    function DrawRect(){
    if(!FirstClick){
    ....
    }
    return true;
    }
    </script>

    It should get the first (x,y)position of the mouse by the first click.
    Then draw a rectangle while the mouse moves over. (Thusfar it works).
    And on a second click stop drawing and leave that recangle.

    And the onClick is not done the second time. How can I get this to work?

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 513 Times in 500 Posts
    insufficient code to see whats wrong but this works
    Code:
    <HTML>
    <HEAD>
    <TITLE>Guess the number</TITLE>
    </HEAD>
    <BODY>
    
    <div id="id1" onClick="return showPos(event);" onMouseOver="return DrawRect();" style="position:relative;width:300px;height:300px;background-color:#FFFFCC;" >Hello World</div>
    
    <script>
    
    var FirstClick = true;
    var Div;
    
    function showPos(zxce){
     if(FirstClick){
      Div=[zxcStyle('DIV',{position:'absolute',overflow:'hidden',left:zxcEventXY(zxce)[0]+'px',top:zxcEventXY(zxce)[1]+'px',width:'50px',height:'30px',border:'solid black 1px'}),zxcEventXY(zxce),zxcMse(zxce)];
      zxcEventObj(zxce).appendChild(Div[0]);
     }
     else{
      Div=null;
     }
     FirstClick = !FirstClick;
     return true;
    }
    
    function DrawRect(zxce){
     if (!FirstClick){
      var zxcw=zxcMse(zxce)[0]-Div[1][0];
      var zxch=zxcMse(zxce)[1]-Div[2][1];
      zxcStyle(Div[0],{left:(zxcw<0?Div[1][0]+zxcw:Div[1][0])+'px',top:(zxch<0?Div[1][1]+zxch:Div[1][1])+'px',width:Math.abs(zxcw)+'px',height:Math.abs(zxch)+'px'});
     }
    }
    
    function zxcMse(e){
      if (!document.all){ return [e.clientX+zxcDocS()[0],e.clientY+zxcDocS()[1]] }
      else { return [event.clientX,event.clientY]; }
    }
    
    function zxcDocS(){
     if (!document.body.scrollTop){ return [document.documentElement.scrollLeft,document.documentElement.scrollTop]; }
     else { return [document.body.scrollLeft,zxcsy=document.body.scrollTop]; }
    }
    
    function zxcEventObj(zxce){
     if (!zxce) var zxce=window.event;
     zxce.cancelBubble=true;
     if (zxce.stopPropagation) zxce.stopPropagation();
     if (zxce.target) zxceobj=zxce.target;
     else if (zxce.srcElement) zxceobj=zxce.srcElement;
     if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
     return zxceobj;
    }
    
    function zxcEventXY(zxce){
     if (typeof zxce=='undefined') zxce=window.event;
     if (typeof zxce.layerX=='undefined') zxce.layerX=zxce.offsetX;
     if (typeof zxce.layerY=='undefined') zxce.layerY=zxce.offsetY;
     return [zxce.layerX,zxce.layerY];
    }
    
    function zxcEventAdd(zxco,zxct,zxcf) {
     if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
     else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
     else {
      var zxcPrev=zxco["on" + zxct];
      if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
      else { zxco['on'+zxct]=zxco[zxcf]; }
     }
    }
    
    var zxcEvt=0;
    
    function zxcAddEvt(zxco,zxcfun,zxcevt){
     if (zxco['zxc'+zxcfun+zxcevt]){ return; }
     zxco['zxcaddEvt'+zxcEvt]=window[zxcfun];
     zxco['zxc'+zxcfun+zxcevt]=true;
     zxcEventAdd(zxco,zxcevt,'zxcaddEvt'+zxcEvt);
     zxcEvt++;
    }
    
    zxcAddEvt(document,'DrawRect','mousemove')
    
    function zxcStyle(zxcele,zxcstyle,zxctxt){
     if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
     for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
     if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
     return zxcele;
    }
    
    
    </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/


  •  

    Posting Permissions

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