SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    ********* Wizard silver trophy Cam's Avatar
    Join Date
    Aug 2002
    Location
    Burpengary, Australia
    Posts
    4,495
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)

    Checking if mouseover

    Hey, pulling the JS questions out today

    How can I check if the mouse is over another element. Here is some pseudo-code for what I want
    PHP Code:
    if ( document.getElementById('element').isMouseOver )
    {
       
    // blah blah

    Is that possible and if so, how?

    Thanks

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Browser support is really shaky but I found a resource that has gotten it to work with nearly every browser. It doesn't seem like it's worth the trouble of implementing though.

    http://www.howtocreate.co.uk/tutoria...?tut=0&part=17

  3. #3
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    I don't think that page works properly.

    I use a 1000, 800 screen size, and the co-ordinates on the mouseover give 400, 3900?? Thats not right.

    If you can't put a onmouseover on the object; ie;
    <a onmouseover="javascript:alert()">click here</a>

    you could use an invisible object,(clear pic, empty table) and use that in the same area and put a mouseover on that.

    I use this to get a mouse position o the screen;

    Code:
    <html>
    <head>
    <style type="text/css">
    #mover1 { position:absolute; left:7px; top: 184px; width:40px; height:50; z-Index: 1}
    
    </style>
    </head>
    <body>
    
    <form name="Show">
    <input type="text" name="MouseX" value="0" size="4"> X<br>
    <input type="text" name="MouseY" value="0" size="4"> Y<br>
    </form>
    
    <script language="JavaScript1.2">
    
    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.Show.MouseX.value = tempX
      document.Show.MouseY.value = tempY
    document.all.mover1.style.top=tempY-25
    document.all.mover1.style.left=tempX-20
      return true
    }
    
    function handdown() { for(i=4;i>1;i--); hand.src="moreimages/rt"+i+".gif" 
    }
    function handup() { for(i=1;i<4;i++); hand.src="moreimages/rt"+i+".gif" }
    
    </script>
    <img src="" height="1000">
    <img id=mover1 name=hand src="moreimages/rt4.gif" onMousedown=handdown() onMouseup=handup()>
    </html>
    If you are trying to get a mouse position in a certain area, and the above doesn't work, you could try to create a grid in the area using a javascript created map;

    Code:
    <img src="emptypic.gif" width=250 height=250 border=1 usemap="#findmouse">
    <map name="findmouse">
    <script>
    function showmouse(x,y) { alert(x,y) }
    for (i=0;i<250;i+=5) {
    for (j=0;j<250;j+=5) {
    document.write('<area shape="rect" coords="'+i+','+j+','+(i+5)+','+(j+5)+'" href="javascript:showmouse('+i+','+j+')">')
    }}
    </script>
    </map>
    just checked it and it works. If there would be any cross-br0wser complications in the above, could someone let me know.

    I hope it helps
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  4. #4
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    The co-ordinates where right....

    I apologies! The co-ordinates where right, (from the top of the document, not screen)
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if


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
  •