SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Get mouse coordinates (x and y positions)

    Hi,

    I have a div with id "box" with display property set to none and position to absolute, what i am trying to achieve is that i have to get the div with id "box" to be visible on mouse over of an image and disappear on mouse out. I know there are a lot of tooltip scripts out there but i don't really like it, i want my solution to be straight to the point. I would greatly appreciate the help

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Simply use onmouseover and onmouseout events on the image to show/hide the div.

  3. #3
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Point well taken

    but i'm not 'that' novice. The main focus of the problem is the x,y position of mouse and to follow the mouse positions. And also cross-browser compatibility. I was just explaining what i'm trying to achieve.

    Quote Originally Posted by Pepejeria View Post
    Simply use onmouseover and onmouseout events on the image to show/hide the div.

  4. #4
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok i have a better idea, how can i find the position of the object where i specify onmouseover. I don't want to use id's for the object. Anyway what i am asking is, how to get the top and left values of the object in to document.getElementById("box").style.top and document.getElementById("box").style.left? i tried to get the values of the object by using 'this' but didn't seem to work e.g:- this.style.top;

  5. #5
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not sure if I understand why you would need the coordinates... but it is quite easy to get them:

    Code:
    <html>
    <head>
    	<title>Coordinates</title>
    </head>
    <body>
    
    <div id="output"></div>
    
    <script>
    document.onmousemove = function(evt) {
    	if (!evt) evt = window.event;
    	
    	var output = document.getElementById("output");
    	output.innerHTML = "x = " + evt.clientX + ", y = " + evt.clientY;
    }
    </script>
    
    </body>
    </html>

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I suspect that he's wanting the mouse coordinates because he's wanting to create a custom tooltip that follows the mouse while over an image.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    I suspect that he's wanting the mouse coordinates because he's wanting to create a custom tooltip that follows the mouse while over an image.
    exactly, wasn't that obvious

  8. #8
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cssExp View Post
    exactly, wasn't that obvious


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
  •