Forum Moderators: open
Now I want the X0 X1 Y0 Y1 coordinates of the selected area in 4 text fields of a form, so I can tell the server app to give me the selected rectangle in a new picture.
Problem is, I only get the positions relative to the browser windows, so I would need another click e.g. in the upper left corner of the picture so I can transform the absolute positions into relative positions.
Is there a shortcut/way to get the X/Y position of a picture within the browser window? Or rather to get the mouse position relativly to the picture?
Thanks a lot.... (so far I'm using hundreds of radio buttons around the picture to indicate crop positions, but that costs me 4 clicks instead of click-drag-release)
Is it something like this you are after?
<html>
<head>
<script language="JavaScript">
function getDetails(obj){
clickX = window.event.x-obj.offsetLeft;
clickY = window.event.y-obj.offsetTop;
alert(clickX);
alert(clickY);
}
</script>
</head>
<body>
<img src="image.jpg" onclick="getDetails(this)">
</body>
</html>
-Gs
I'm quite sure I can handle the click and release stuff and push it into some form fields - but could you give me another hint:
When clicking and dragging I'd like to show a frame (dotted or 1px strong) indicating the rectangle that has been selected so far (something like the area selector in every scanner software) - is there an easy way to do this? drawrect() probably won't do the job while the mouse moves - everything would be covered then. I probably need a rectangle object with a fixed x0/y0 and a "moving" x1/y1 that responds to a mousemove - event. Anything like this in the cards?
I did think on that part relating to your original question. But I am afraid I cannot think of a way either to complete that, the reason I knew about what I have posted was that our project required being able to position icons on an image and send the X&Y co-ordinates to the database.
If you manage to find a way of completing the dotted layer please keep me informed by posting back here. Hopefully someone else in the forum might know of someway of completing this.
-Gs
I'm still struggling with the mouse-events. After that I'll investigate the frame-stuff.
In the meantime I did this:
<img src="...." onmousedown="getStartPos(this)" onmouseup="getEndPos(this)" border = "1">
getStartPos and GetEndpos are supposed to fill the correspondig form fieds, which they do - but not the way I want them to.
This is what happens:
1. I click the mouse somewhere on the picture. Start position is filled into my fileds X0/Y0.
now if I release the mouse button without moving the mouse first, my X1/Y1 are filled correctly - they now have the same value as X0/Y0.
But obviously this is not what I want. But as soon as I move the move before releasing the button X1/Y1 reamin empty. Does that mean that onmouseup and onmousedown are just two halves of onclick(), so that onmouseup only works when the mouse is kept stable?
Nerd
Have a div styled with
border: 1px dashed #ccc; background: transparent;(or maybe a alpha transparent png for the background) that is absolutely positioned onmousedown and changes size as the mouse moves. Then, you could also leave that div floating and left the user drag it to a new area, making note then of the bounding box div's position, height and width for the crop dimensions.
background: transparent seems to work. But I used the onmousedown event of the <img> to get the absolute position. When dragging the mouse the mouse cursor changed shape and that's it so far.
just found this:
[dunnbypaul.net...]
maybe we can use it as a starting point.
Nerd
P.S. Isn't this a cool place? I have a question, get an answer within minutes, someone comes up with an even better idea - great!
I've added in a draggable hotspot to the bounding box that nearly does a perfect job of keeping the bounding box height and width, but doesn't do so hot with the box's new start x, start y coords. Every browser seems to be returning different values. :(
If anyone would like a link to the test page, just sticky me.
