Hello everybody,
Here is a little javascript that gives me the mouse's
x and y coordinates.
Now, i'd like to be able to make selection(s) rectangle(s)
on a given image with it.
And then, save the selection's specs.
For what i've seen by now: the major problem is the DOM compliant,
and browsers compatibility.
Could you please help/point me out doing it?
thanks in advance,
Thom.
//-------------------------
//The Code:
//-------------------------
<script type="text/javascript" language="javascript">
<!--
function twPositionRelative(evt) {
var nOffsetX;
var nOffsetY;
evt = (evt) ? evt : ((window.event) ? window.event : "");
if (evt) {
if (document.all) {
nOffsetX = evt.offsetX;
nOffsetY = evt.offsetY;
}
else if (document.getElementById) {
nOffsetX = evt.pageX - document.getElementById("monImage").offsetLeft;
nOffsetY = evt.pageY - document.getElementById("monImage").offsetTop;
}
document.getElementById("hTrace").innerHTML = "X : "+nOffsetX+" ; Y :
"+nOffsetY;
}
}
function twInit() {
var oImage = document.getElementById("monImage")
if (oImage) {
oImage.style.cursor = "crosshair"
oImage.onmousemove = twPositionRelative
}
}
-->
</script> 11 6740
thom a écrit : Hello everybody,
Here is a little javascript that gives me the mouse's x and y coordinates.
have a look here : http://perso.wanadoo.fr/stephane.mor...oord_carte.htm
to see how I propose to catch coordinates on an image
Preferably to do not use detection with document.all
because not only IE understand that
To get your selection, easiest way would be to use two successive clicks
1st angle, then oposite angle.
as I do here : http://perso.wanadoo.fr/stephane.moriaux/truc/suisse/
(caution : not finished don't click on green button)
(page in french, and wide screen needed)
You may too use a combination of keys to simulate the lasso ?
You could go here : http://www.walterzorn.com/dragdrop/dragdrop_e.htm
to see if there is something interresting about your deal.
--
Stephane Moriaux et son [moins] vieux Mac
First merci beaucoup ;) answering me so fast and so right!
the given links are the kind of things i'm wishing to do.
( http://perso.wanadoo.fr/stephane.moriaux/truc/suisse/)
i'm gonna try to let user make multiple selections
on the picture, then generate the corresponding map.
ASM wrote : Preferably to do not use detection with document.all because not only IE understand that
you're right, a similar script (based on the given one in my
first post) doesn't work properly in all browsers when
adding the selection rectangle funcs (especially Mac's safari
if i remember right).
Thom.
thom a écrit : First merci beaucoup ;) answering me so fast and so right! the given links are the kind of things i'm wishing to do. (http://perso.wanadoo.fr/stephane.moriaux/truc/suisse/)
i'm gonna try to let user make multiple selections on the picture, then generate the corresponding map.
This example was basically to get several areas cooordinates
and was a little simplified to one area (in order to go to a new page
with this area taller re-sized (suite en devenir ...) )
Instead to begin a new fresh selection you just need :
- to validate the onwork selection
- to begin a new one while keeping the old one.
Validations could be stocked in an array.
a similar script (based on the given one in my first post) doesn't work properly in all browsers when adding the selection rectangle funcs (especially Mac's safari if i remember right).
if it works on 1st point it would have to work with 2nd point.
I would do something like that :
- image to map
- a hidden div with border and transparent background-image
with a onclick function to select this div
- a lasso function similar that I have on given example
on 1st click : 1st point and stock in a variable
on 2nd click or double-click : 2nd point stocked
then :
- cloning hidden div above
- giving it correct size and place (from stock)
- giving it an id and visibility
- eventualy to give it a title or/and a link in accordance
- perhaps to stock all necessary in an array
- when clicking on this new div : function to re-arrange it ?
- a button to validate the complete map
to create html code of all this clones
(using a loop on collection of this clones
with result in a textarea to afterward copy its content)
--
Stephane Moriaux et son [moins] vieux Mac
Hello,
my comments will be based on your code (suisse),
so you can better understand what i'm talking about,
and you know what you've done, i don't :D and
my try-outs are not fully working for the moment.
ASM wrote : Instead to begin a new fresh selection you just need : - to validate the onwork selection - to begin a new one while keeping the old one.
Validations could be stocked in an array.
that's would be done in the termine() function ?
Validations could be stocked in an array.
im not so used with javascript, and have no clue
on how to save the "name=coordonnee" values
(the one you have used in the input form to show the points)
into a php array,in order to generate the map coordinates using
this array values.
- to validate the onwork selection - to begin a new one while keeping the old one.
so keeping the selection is to save values in the array
and still showing up the selected rectangle(s) while making
another one.
Meaning if user has made 3 selections, at end, you
will see the 3 rectangle on your suisse map.
None of them being cleared with the raz() function or the termine().
how?
I would do something like that : - image to map - a hidden div with border and transparent background-image with a onclick function to select this div - a lasso function similar that I have on given example on 1st click : 1st point and stock in a variable on 2nd click or double-click : 2nd point stocked then : - cloning hidden div above - giving it correct size and place (from stock) - giving it an id and visibility - eventualy to give it a title or/and a link in accordance - perhaps to stock all necessary in an array - when clicking on this new div : function to re-arrange it ? - a button to validate the complete map to create html code of all this clones (using a loop on collection of this clones with result in a textarea to afterward copy its content)
Wow O_o! amazing, sounds very good, but i don't think
i could make it work lol! That's my feeling for moment,
but who knows, someday maybe ;)
Thanks for helping,
thom.
thom wrotes : im not so used with javascript, and have no clue on how to save the "name=coordonnee" values (the one you have used in the input form to show the points) into a php array,in order to generate the map coordinates using this array values.
in terminee() i modified a var which i gave the coordianates, like
this: points=" "+pos1x+" "+pos1y+" "+posx+" "+posy+" ";
then i wanted to take the value from points into php.
Is i possible using something like this?
<?php
echo "<script type=\"text/javascript\">alert(\"value from points var:
\"+points);</script>";
?>
instead of the popup, maybe i could affect the point value to a
php var like:
<?php
$coords = echo "<script type=\"text/javascript\">points;</script>";
?>
OK then i understood you were using C.value to do what i told
you with my variable ;)
So the C.value would be used instead of my var points.
thom.
thom a écrit : thom wrotes :
[...]
OK then i understood you were using C.value to do what i told you with my variable ;) So the C.value would be used instead of my var points.
hi thom,
you'll find something more finished here http://stephane.moriaux.perso.wanado...uisse/thom.htm
when all areas are fixed the push on green button
catch all areas and create html code (links width sizes and position)
all this html code comes in a textarea of a form
you'll put your php file url in this form's action
to get this area value
Sorry it was too difficult to explain step by step what you could do
with precedent example.
Sorry 2 : I'm on holiday this evening (10 days)
--
Stephane Moriaux et son [moins] vieux Mac
thom a écrit : thom wrotes :
im not so used with javascript, and have no clue on how to save the "name=coordonnee" values (the one you have used in the input form to show the points) into a php array,in order to generate the map coordinates using this array values. in terminee() i modified a var which i gave the coordianates, like this: points=" "+pos1x+" "+pos1y+" "+posx+" "+posy+" "; then i wanted to take the value from points into php.
preferably :
points="'"+pos1x+"','"+pos1y+"','"+posx+"','"+posy +'";
or :
points="'"+pos1x+"','"+pos1y+"';'"+posx+"','"+posy +"'";
Like that the text field C value will be an array
or an array of 2 arraies
Is i possible using something like this?
you confuse me with your php I sniped
on example all work by JavaScript
positions of 2 oposit points of selection are in the text field
all what you have to do is to put the right uri of your php file in the
action of this form to get this text field value
when you submit with green button
OK then i understood you were using C.value to do what i told you with my variable ;) So the C.value would be used instead of my var points.
if C is the text field of form, I think yes
--
Stephane Moriaux et son [moins] vieux Mac
Hi stephane,
ASM wrote : you'll find something more finished here
Sorry it was too difficult to explain step by step what you could do with precedent example.
Don't worry for that, it's very kind of you having posted a new
source code for me... it's now time for me to study it :D
Sorry 2 : I'm on holiday this evening (10 days)
you lucky!
've nice holidays ;)
thom.
Hello,
i hope u'll read this post today:
your code is running like a charm if on a single page,
but once you put it into a div, which you selected the style position,
the selection rectangle are not on the picture anymore, say i click one
point, the showing point is 100px left etc.. (doesn't match anymore).
I know it is css, but wow, can't find a solution!
Did you? or someone else?
thx, thom.
thom wrote on 08 mei 2006 in comp.lang.javascript : i hope u'll read this post today: your code is running like a charm if on a single page, but once you put it into a div, which you selected the style position, the selection rectangle are not on the picture anymore, say i click one point, the showing point is 100px left etc.. (doesn't match anymore). I know it is css, but wow, can't find a solution! Did you? or someone else?
To whom are you talking?
Wahat are you talking about?
Please always quote on usenet.
If you want to post a followup via groups.google.com, don't use the
"Reply" link at the bottom of the article. Click on "show options" at the
top of the article, then click on the "Reply" at the bottom of the article
headers.
<URL: http://www.safalra.com/special/googlegroupsreply/ >
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Evertjan. a écrit : thom wrote on 08 mei 2006 in comp.lang.javascript: i hope u'll read this post today: your code is running like a charm if on a single page, but once you put it into a div, which you selected the style position, the selection rectangle are not on the picture anymore, say i click one point, the showing point is 100px left etc.. (doesn't match anymore). I know it is css, but wow, can't find a solution! Did you? or someone else?
To whom are you talking? Wahat are you talking about?
Please always quote on usenet.
If you want to post a followup via groups.google.com, don't use the "Reply" link at the bottom of the article. Click on "show options" at the top of the article, then click on the "Reply" at the bottom of the article headers.
<URL: http://www.safalra.com/special/googlegroupsreply/ >
sorry, i thought you were still seeing former posts..
i am talking about this: http://stephane.moriaux.perso.wanado...uisse/thom.htm
problem comes when i put this everything into a div give it a place
on a webpage: the selection rectangle isn't synchronized, it doesn't
fit with the selection anymore.
it has to do with the "create selection" and the "lasso" functions...
and the x, y values.
thom. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Philippe Meunier |
last post by:
Hi,
I would like to know How I could draw a Dashed rectangle over everything in
a container. I will use this to draw a selection rectangle (like in VB.NET
Form Designer UI). And even it draws in...
|
by: (Pete Cresswell) |
last post by:
I've got a TreeView on the left of my screen. As the user navigates the tree, I
load corresonding detail info into the rest of the screen.
Works ok, but when the user clicks on a detail field,...
|
by: (Pete Cresswell) |
last post by:
Seems like I've been here before, but can't find anyting in Google.
I've got two list boxes on a form.
Seems to me like the inactive ListBox's selection rectangle should be something
like...
|
by: Jeroen Ceuppens |
last post by:
I need a selection tracker on a graphic
Idea:
left click: rectangle appear en grows when you move the mouse, again
clicking is lock te rectangle
How do you do that?
Greetz
Jeroen
|
by: TT (Tom Tempelaere) |
last post by:
Hi there,
In my application I have a panel that contains a matrix of user controls.
The user control is fairly simple. It merely draws a circle that represents
an object in my code. The object...
|
by: Tyrant Mikey |
last post by:
I don't know if this can even be done, but I'd REALLY like to eliminate
the selection rectangle that appears around my ImageButton controls
when the user clicks on them. The buttons are on a black...
|
by: Brian Henry |
last post by:
I am trying to do a owner drawn list view in detail mode, when i inherited
the list view into a new custom control then turned on double buffering all
the sudden the selection rectangle is the...
|
by: (PeteCresswell) |
last post by:
Got a TreeView control on the screen.
User clicks a node, screen loads details for that node.
Screen has two modes: Browse and Edit.
If the user clicks "Edit", I set Tree.Enabled=False and...
|
by: Jure Bogataj |
last post by:
Hi all!
I have a problem (performance issue) with listview. I have implemented an
ItemSelectionChange on my listview and put some code in it (I build some
toolbar based on selection and update...
|
by: CloudSolutions |
last post by:
Introduction:
For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
|
by: Faith0G |
last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome former...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: aa123db |
last post by:
Variable and constants
Use var or let for variables and const fror constants.
Var foo ='bar';
Let foo ='bar';const baz ='bar';
Functions
function $name$ ($parameters$) {
}
...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
| |