save image coordinates

in face book you can point on some area on image and it will remember the coordinates.


i want to view some image too...and that the user will be able to point and submit the coordinates...and next time he will enter it there will a point on the image exactly where he pointed.

how can we do it?
sasha85Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
The body margin is not an issue here.
I have fixed the script to show old dots and also to not allow clicking inside the old dots.

Michel
overlay-a-dot.html.txt
0
 
Michel PlungjanIT ExpertCommented:
Will this be for other people to see - if yes, then you need a server process
Wrap a form around the image and do
<form action="savecoordinates.asp">
<input type="image" name="myImage">
</form>

on the server you will receive the coordinates as
myImage.x=132&myImage.y=346

you can then create a div with z-index and absolute positioning, something like

<div>
<form action="savecoordinates.asp">
<input type="image" name="myImage">
</form>
<div style="position:absolute; top:<%= request.form["myImage.y"] %>; left:<%= request.form["myImage.x"] %>"><img src="point.gif"></div>
</div>

instead of request.form you can use a cookie for the user or get the coordinates from a database
0
 
sasha85Author Commented:
ok...i understand now how to view with div absolut cordinations...
but how i can let the user the option to choose such cordinations with clicking on ht image?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Michel PlungjanIT ExpertCommented:
The x and y coordinates are automatically sent to the server if you make it an input type=image

0
 
sasha85Author Commented:
<form action="savecoordinates.asp">
<input type="image" name="myImage">
</form>

without submit button?
can i add in the same form some text inputs?
0
 
Michel PlungjanIT ExpertCommented:
Yes and the image IS the submit button
0
 
sasha85Author Commented:
if i will add text inputs brfore the image then it will submit all and there is no other way to submit it otherwise?
0
 
Michel PlungjanIT ExpertCommented:
Of course there is...

You can attach an event handler and load a url with the event.x, event.y of the click
0
 
sasha85Author Commented:
i am not sure what you mean...
how can i place 1 text input + image + submit input?
0
 
Michel PlungjanIT ExpertCommented:
<form action="savecoordinates.asp">
<input type="text" name="title">
<input type="image" name="myImage" src="myImage.jpg">
</form>

Type the title and click on the image and you should get


savecoordinates.asp?title=bla&myImage.x=434&myImage.y=234

but why not just try?
0
 
sasha85Author Commented:
i understand what you say but i ask how can i

<form action="savecoordinates.asp">
<input type="text" name="title">
<input type="image" name="myImage" src="myImage.jpg">
<input type=submit>
</form>

the user will have to click on submit button and the form won;tbe submited straigh after clicking on image...(cause user may pick by mistake a wrong area and i want to give the option to fix and choose again)

and how can i make that when user will click on some area on the image there will be a point set on the choosen location
0
 
sasha85Author Commented:
when i will click on some point it will place temp red point or X on the image
http://stephane.moriaux.pagesperso-orange.fr/truc/coord_carte
0
 
Michel PlungjanIT ExpertCommented:
0
 
sasha85Author Commented:
nice..:)
i just need to put a point(pixel) on  a selected location...far more simple than your link...:)

can you help please?
0
 
Michel PlungjanIT ExpertCommented:
Perhaps tomorrow... To late for computers now.
0
 
sasha85Author Commented:
i will wait:) good night
0
 
Michel PlungjanIT ExpertCommented:
That ended up being a custom job...
add-dot-at-coordinates.html.txt
0
 
sasha85Author Commented:
your code is nice but i need to stick with mine:)
in your code the chossing area limittedto the picture only and that what i need exacty on my code...

how i can do this?(limit the picking area)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Grid Postion Select</title>
<script language="javascript">
<!--//
var IE = document.all?true:false 
if (!IE) document.captureEvents(Event.MOUSEMOVE)
 
document.onmousemove = getMouseMovementLocation;
 
var tempX = 0
var tempY = 0
 
function getMouseMovementLocation(e) {
	if (IE) {
		tempX = event.clientX + document.body.scrollLeft
		tempY = event.clientY + document.body.scrollTop
	}
	else {
		tempX = e.pageX
		tempY = e.pageY
	}
	if (tempX < 0){tempX = 0}
	if (tempY < 0){tempY = 0}
	return true
}
 
document.onmousedown = showSelectedPosition;
 
function showSelectedPosition(e) {
	var validArea = true;
	var posX;
	var posY;
	if (tempX < 200 || tempX > 600) validArea = false;
	if (tempY < 100 || tempY > 500) validArea = false;
	
	if (validArea) {
		posX = (tempX - 10);
		posY = (tempY - 10);
		document.getElementById("xDiv").style.left = posX;
		document.getElementById("xDiv").style.top = posY;
		document.getElementById("xDiv").style.visibility = "visible";
                document.getElementById("PosX").value = tempX;
                document.getElementById("PosY").value = tempY;
	}
	else {
		document.getElementById("xDiv").style.visibility = "hidden";
	}
}
//-->
</script>
<style type="text/css">
body {
	margin: 0px;
}
 
#gridDiv {
	width: 235px;
	height: 700px;
	position: absolute;
	left: 200px;
	top: 100px;
	visibility: show;
        background-image:url('map.jpg');
	border-style: 0px solid;
}
 
#xDiv {
	width: 20px;
	height: 20px;
	position: absolute;
	visibility: hidden;
	font-family: tahoma;
	font-weight: bold;
	color: #ff0000;
	font-size: 16px;
   text-align: center;
   line-height: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<form>
<td>
First name: 
 
<input type="text" name="firstname">
<br>
<input type="submit" value="Submit">
</td>
 
<td>
<input type="hidden" name="PosX" id="PosX" />
<input type="hidden" name="PosY" id="PosY" />
<div id="gridDiv">&nbsp;</div>
<div id="xDiv">X</div>
</td>
</form>
</tr>
</table>
</body>
</html>

Open in new window

0
 
sasha85Author Commented:
i need to upgrae this to image inter cordinations and limit the picking area to image only...
i am afraid that if user have diffrent resolutions or broeser...it will not show him the same positions as other user picked...
0
 
Michel PlungjanIT ExpertCommented:
Ok, here is your html updated with my code
add-dot-at-coordinates2.html.txt
0
 
sasha85Author Commented:
it's great but it gives option to pick a lot ox X's...
i mean i need only one X...only one point that user will be able to choose...
for example you can see that in my code when you pick some position and than click on other second time...the first X will disapear and new X will be shown at the new place
0
 
sasha85Author Commented:
you see, in your script i can leave how many X's as i want...
can you please show me how i can limit it to show only one X on a screen?
0
 
Michel PlungjanIT ExpertCommented:
Yes, I understood. I was not online (I am in CET)

Here - replace function makeCoord {
.
.
.
}
with this:
var saveDiv=null;
function makeCoord(x,y) {
  coordinates[coordinates.length]={x:x,y:y}
  if (saveDiv) newDiv = saveDiv;
  else {
    var newDiv = document.createElement('DIV');
    newDiv.style.position =  'absolute';
    newDiv.style.width =  '1px';
    newDiv.style.height = '1px';
    newDiv.style.color = "red";   
    newDiv.style.fontFamily = "Tahoma";   
    newDiv.style.fontSize = "16pt";   
    newDiv.style.fontWeight = "bold";   
    newDiv.innerHTML = "X";   
    newDiv.style.zIndex = 100;   
    newDiv.id = "xDiv";   
    document.getElementById('gridDiv').appendChild(newDiv)
    saveDiv = document.getElementById('xDiv')
  }
  newDiv.style.left = (x-5)+'px';   
  newDiv.style.top = (y-10)+'px';   
  
}

Open in new window

0
 
sasha85Author Commented:
suppose other users have diffrent resolutions\screens\browsers...will the positions that i get be universal for everyone?
0
 
Michel PlungjanIT ExpertCommented:
As far as I know, yes - let me know if you test on Safari or IE on mac or such
0
 
sasha85Author Commented:
and suppose i got 5 positions(x and y)
how can i print them in the exact pointes the user picked?
0
 
sasha85Author Commented:
do i need body {
      margin: 0px;
}
 

and if i do, then what i need to change if i want to make it 10px
?
0
 
sasha85Author Commented:
sometimes when i click on some locations the x goes to the top left corner...

about the printing , how i can print lots of stored x,y in the same location they was selected on the image?
0
 
Michel PlungjanIT ExpertCommented:
Not in the new code.

When you click inside the div you already used with the X you click in a corner of THAT div. It is fixed in the last code I gave you...


To print stored xy, change the code from static
window.onload=function() {
  showCoord(123,123);
  showCoord(111,222);
  showCoord(200,650);
  showCoord(100,500);
}

to

window.onload=function() {
<%
for  .....
response.write   "showCoord("&x&","&y&");"& vbcrlf
next
%>
}
0
 
sasha85Author Commented:
the problem now is if 2 locations on the map are too colse to each other i get the alert...
the x is big but there is some kind of dead zone around it too...and you cannot choose second dot in 3mm near...

in order to fix it, how can i set the already printed locations with dot.gif
and instead the x pick pick.gif?

thank you for you help
dot.gif
pick.gif
0
 
Michel PlungjanIT ExpertCommented:
In first function replace
  newDiv.style.color = "red";  
  newDiv.style.fontFamily = "Tahoma";  
  newDiv.style.fontSize = "16pt";  
  newDiv.style.fontWeight = "bold";  
  newDiv.innerHTML = "X";  

with

newDiv.innerHTML = '<img src="pick.gif">';  

and in the other with

newDiv.innerHTML = '<img src="dot.gif">';  
0
 
Michel PlungjanIT ExpertCommented:
And possibly change
 newDiv.style.left = (x-5)+'px';  
 newDiv.style.top = (y-10)+'px';  
to

 newDiv.style.left = x+'px';  
 newDiv.style.top = y+'px';  

since we no longer need to center in the X
0
 
sasha85Author Commented:
how i can add option to each one of the positions that will print the name of the position rs("name") inside tooltip\bubble?

window.onload=function() {
  showCoord(123,123);
  showCoord(111,222);
  showCoord(200,650);
  showCoord(100,500);
}

0
 
Michel PlungjanIT ExpertCommented:
Ermmm...

for 500 points which are worthless to me, you have gotten a custom javascript which I normally charge for....
Then you got several tweaks to the same script...
Perhaps we should continue this via email?



function showCoord(x,y, msg) {
  var newDiv = document.createElement('DIV');
  newDiv.style.position =  'absolute';
  newDiv.style.width =  '1px';
  newDiv.style.height = '1px';
  newDiv.style.zIndex = 100;   
  newDiv.innerHTML = '<a href="#" title="'+msg+'" onClick="return false"><img src="dot.gif" border="0"></a>'
  document.getElementById('gridDiv').appendChild(newDiv)
  newDiv.style.left = x+'px';   
  newDiv.style.top = y+'px';   
}
 
 
  showCoord(123,123,"this is a message for dot1");
  showCoord(111,222,"this is a message for dot2");
  showCoord(200,650,"this is a message for dot3");
  showCoord(100,500,"this is a message for dot4");

Open in new window

0
 
sasha85Author Commented:
what is your address?
0
 
Michel PlungjanIT ExpertCommented:
In my profile :)
0
 
sasha85Author Commented:
last question about this:
how looks the js validation for the image position values?

document.msg.sl2.selectedIndex < 1?
document.msg.sl2.value=?
 
function checkup() {
          if(document.msg.customers.selectedIndex < 1 || document.msg.color.selectedIndex < 1
                || document.msg.sl1.selectedIndex < 1 || document.msg.flow.selectedIndex < 1 || document.msg.pakistan.selectedIndex < 1) {
                    alert(document.getElementById('ioi').innerHTML);
                    return false;
          }
          return true;
}

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
What is the name of the field and is it a text field?
selectedIndex is for <select ...

If text then


if (document.msg.customers.selectedIndex < 1 ||
    document.msg.color.selectedIndex < 1 ||
    document.msg.sl1.selectedIndex < 1 ||
    document.msg.flow.selectedIndex < 1 ||
    document.msg.pakistan.selectedIndex < 1 ||
    document.msg.sl2.value= "") {
                    alert(document.getElementById('ioi').innerHTML);
                    return false;
          }
0
All Courses

From novice to tech pro — start learning today.