PDA

View Full Version : 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/showthread.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:



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


<div id="zoomwindow"><img src="" alt="" id="zoomimg" /></div>

which has the following CSS:



#zoomwindow {
width:300px;
height:225px;
padding:10px;
border:1px solid navy;
background:white;
display:none;
position:absolute;
}


And my links are something like:


<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. :confused: 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):
<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>

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