get mouse X,Y coords onclick

**kadm** · 05-21-2008, 12:57 AM

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!

**Nile** · 05-21-2008, 02:29 AM

http://www.dynamicdrive.com/forums/s...ad.php?t=31697
Does this help you at all?

**kadm** · 05-21-2008, 04:33 PM

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...

**Master_script_maker** · 05-21-2008, 08:32 PM

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>

**kadm** · 05-21-2008, 09:11 PM

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...

**molendijk** · 05-21-2008, 09:55 PM

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.

**kadm** · 05-21-2008, 10:17 PM

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!

Thread: get mouse X,Y coords onclick

Thread Tools

Search Thread

get mouse X,Y coords onclick

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

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

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

Bookmarks

Bookmarks

Posting Permissions