Results 1 to 4 of 4

Thread: on mouse over trick...

  1. #1
    Join Date
    Dec 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default on mouse over trick...

    i was using Mambo to create some websites for students, then i notice that in a button uses on mouse over and displays some textbox and that textbox followed the mouse pointer all over the button.
    does anyone knows the trick?
    Thanks

  2. #2
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Can you provide a link to the page where forums users can view the effect?

    I wonder what is the relationship between Mambo and ASP!!

  3. #3
    Join Date
    Nov 2006
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Are you looking for something like this?

    Code:
    <HTML><head>
    
    <script type="text/javascript">
    
    var IE = document.all?true:false
    if (!IE) document.captureEvents(Event.MOUSEMOVE)
    
    document.onmousemove = getMouseXY;
    
    var tempX = 0
    var tempY = 0
    
    // ===========================
    
    function getMouseXY(e) {
    
      if (IE) { 
        tempX = event.clientX + document.body.scrollLeft
        tempY = event.clientY + document.body.scrollTop
      } else {  
        tempX = e.pageX
        tempY = e.pageY
      }  
    
      if (tempX < 0){tempX = 0}
      if (tempY < 0){tempY = 0}  
      
    document.getElementById('TestDiv').style.left=tempX;
    document.getElementById('TestDiv').style.top=tempY;
    
    return true;
    }
    
    // ===========================
    
    function ShowIt() {
      document.getElementById('TestDiv').style.display='block';
    }
    
    // ===========================
    
    function HideIt() {
      document.getElementById('TestDiv').style.display='none';
    }
    
    // ===========================
    
    </script> 
    
    
    </head>
    <input id="Button1" style="width: 100px; height: 100px" type="button" value="button" onmouseover="ShowIt();" onmouseout="HideIt();"/>
    
    <div id="TestDiv" style="display:none; border:1px solid black;width:150px;height:100px;position:absolute;text-align:center;background-color:#FFFFF0;">
    <br/>This is a sample message
    </div>
    
    </HTML>
    ==============================================================================================================
    Disclaimer: The provider of this code offers no warranties or assurances of any kind. The code may or may not be 100% compliant with every single coding standard up to the current date, hour or minute. If you are a whiney, pretentious "code nazi" offended by the occasional use of deprecated tags, non-shorthand CSS, voluminous use of ASP.NET, or other preferences chosen by the provider, then bypass this post or leave the website completely - this is not for you.
    ==============================================================================================================
    Last edited by mastergeek70; 12-07-2006 at 03:29 AM.

  4. #4
    Join Date
    Dec 2005
    Location
    Moscow, Russia
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    mastergeek70 : This is old script (for NN4 also).

    But this script is more short and effective (not check mouseover on all document) :
    Code:
    <html><head>
    <script>d=document;g=function(X){return d.getElementById(X);}
    onload=function(){
      g('Button1').onmousemove=function(e){e=e||event;
        g('TestDiv').style.left=e.clientX + d.body.scrollLeft+5
        g('TestDiv').style.top=e.clientY + d.body.scrollTop-2
      }
      g('Button1').onmouseover=g('Button1').onmouseout=function(e){e=e||event;g('TestDiv').style.display
        =e.type=='mouseover'?'block':'none';
      }
    }
    </script> 
    </head><body>
    <input id="Button1" style="width: 100px; height: 100px" type="button" value="button">
    
    <div id="TestDiv" style="position:absolute;display:none; border:1px solid black;width:150px;height:100px;text-align:center;background-color:#FFFFF0;">
    <br/>This is a sample message
    </div>
    </body></html>
    (modern Firefox supports .clientX; I did check in FF1.07)

    ...or write (!d.all?e.pageX:e.clientX + d.body.scrollLeft)

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
  •