Results 1 to 7 of 7

Thread: get mouse X,Y coords onclick

  1. #1
    Join Date
    May 2008
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default get mouse X,Y coords onclick

    Hello friends, I'd like to find help to get the mouse cursor position through javascript.
    I've found some functions out there, but every one works based on such things as document.onmouseover = FunctionName, and my limited JS knowledge doesn't let me modify them to fit my needs.
    Concretely, I'd like to get the mouse cursor position after clicking a link, in this link I'll invoke (onclick) a function to get the X,Y coords and put there a (previously hidden) div to show a enlarged version of the image which thumbnail is next to the link.
    Is something pretty similar to the "enlarge" function below the thumbnails of the search results at eBay, but far simpler.
    I'll appreciate a lot any help. Thanks!

  2. #2
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

  3. The Following User Says Thank You to Nile For This Useful Post:

    kadm (05-21-2008)

  4. #3
    Join Date
    May 2008
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Yes! Thanks Nile. It helped me a lot.
    Now I'm using the function in this way:

    Code:
    <script type="text/javascript">
    var isIE = document.all ? true : false;
    document.onmousemove = getMousePosition;
    function getMousePosition(e) {
    	var _x;
    	var _y;
    	if (!isIE) {
    		_x = e.pageX;
    		_y = e.pageY;
    	}
    	if (isIE) {
    		_x = event.clientX + document.body.scrollLeft;
    		_y = event.clientY + document.body.scrollTop;
    	}
    	posX = _x;
    	posY = _y;
    	return true;
    }
    function enlarge(img,x,y) {
    	var box = document.getElementById('zoomwindow');
    	var im = document.getElementById('zoomimg');
    	box.style.display = 'block';
    	box.style.left = x+'px';
    	box.style.top = y+'px';
    	im.src = img;
    }
    function stopenlarge() {
    	document.getElementById('zoomwindow').style.display = 'none';
    }
    </script>
    I put this DIV at the bottom of my code (but inside the <body>)

    HTML Code:
    <div id="zoomwindow"><img src="" alt="" id="zoomimg" /></div>
    which has the following CSS:

    HTML Code:
    #zoomwindow {
    	width:300px;
    	height:225px;
    	padding:10px;
    	border:1px solid navy;
    	background:white;
    	display:none;
    	position:absolute;
    }
    And my links are something like:

    HTML Code:
    <a href="javascript:void(0)" onmouseover="enlarge('/products/1/5/3/B0ED95A1.jpg',posX,posY)" onmouseout="stopenlarge()">(+) Zoom in</a>
    But... often the div appears blinking as hell, despite I don't move the mouse. It usually happens if I enter the link from the top or the sides, and not so often if I enter the link from down.

    How can I fix this? Perhaps the onmouseover is not the recommended event in this case? Sorry but my JS expertise if far from satisfactory...

  5. #4
    Join Date
    Jun 2007
    Posts
    543
    Thanks
    3
    Thanked 78 Times in 78 Posts
    Blog Entries
    1

    Default

    if you only want onclick try(untesteed):
    Code:
    <script type="text/javascript">
    var isIE = document.all ? true : false;
    document.onmousemove = getMousePosition;
    function getMousePosition(ev) {
    	var _x;
    	var _y;
    	if (!isIE) {
    		_x = ev.pageX;
    		_y = ev.pageY;
    	}
    	if (isIE) {
    		_x = ev.clientX + document.body.scrollLeft;
    		_y = ev.clientY + document.body.scrollTop;
    	}
    	posX = _x;
    	posY = _y;
            var  pos=Array(posX,posY);
    	return pos;
    }
    function enlarge(img,e) {
    	var box = document.getElementById('zoomwindow');
    	var im = document.getElementById('zoomimg');
            var eve=e||event;
            var positions=getMousePosition(eve);
    	box.style.display = 'block';
    	box.style.left = positions[0]+'px';
    	box.style.top = positions[1]+'px';
    	im.src = img;
    }
    function stopenlarge() {
    	document.getElementById('zoomwindow').style.display = 'none';
    }
    </script>
    HTML Code:
    <a href="javascript:void(0)" onmouseover="enlarge('/products/1/5/3/B0ED95A1.jpg')" onmouseout="stopenlarge()">(+) Zoom in</a>
    [Jasme Library (Javascript Motion Effects)] My Site
    /\/\@ /\/\@|{
    There are 10 kinds of people in the world, those that understand binary and those that don't.

  6. The Following User Says Thank You to Master_script_maker For This Useful Post:

    kadm (05-21-2008)

  7. #5
    Join Date
    May 2008
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Well... now its working like a charm in IE, no blinking... but Firefox spits an error:

    "event is not defined"

    on the line: var eve = e||event;

    Any workarounds? I'm confused because of the function expecting two parameters but being invoked with just one...

  8. #6
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,337
    Thanks
    30
    Thanked 137 Times in 132 Posts
    Blog Entries
    32

    Default

    You can keep the 'onmouseover' and 'onmouseout', and yet keep the blinking away by giving the zoomwindow-div a small padding & margin. I would say 'padding: 5px' and 'margin: 5px' should do the job. No flicker.
    ---
    Arie Molendijk.

  9. The Following User Says Thank You to molendijk For This Useful Post:

    kadm (05-21-2008)

  10. #7
    Join Date
    May 2008
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Wow problem solved!

    Now I realize the reason behind the blinking thing. As I was relocating the div to the exact mouse coordinates, when the div appears, its top-left corner sits between the cursor and the link (speaking from a z-axis perspective) and triggered an onmouseout, which triggered my function to hide the div, so the cursor got in touch again with the link doing an onmouseover and so on...

    Thanks a lot to all you guys for help me with this one. See ya!

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
  •