Pixel Location in Images: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| (One intermediate revision by the same user not shown) | |||
| Line 5: | Line 5: | ||
<script language="JavaScript"> | <script language="JavaScript"> | ||
function point_it(event){ | function point_it(event){ | ||
pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft; | pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft; | ||
pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop; | pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop; | ||
document.getElementById("cross").style.left = (pos_x-1) ; | document.getElementById("cross").style.left = (pos_x-1) ; | ||
| Line 17: | Line 17: | ||
<body> | <body> | ||
<form name="pointform" method="post"> | <form name="pointform" method="post"> | ||
<div id="pointer_div" onclick="point_it(event)" style = "background-image:url('third.png');width:512px;height:450px;"> | < div id="pointer_div" onclick="point_it(event)" style = "background-image:url('third.png');width:512px;height:450px;"> | ||
</div> | <img src="point.gif" id="cross" style="position:relative;visibility:hidden;z-index:2;"></ div> | ||
You pointed on y = <input type="text" name="form_y" size="4" /> - x = <input type="text" name="form_x" size="4" /> | You pointed on y = <input type="text" name="form_y" size="4" /> - x = <input type="text" name="form_x" size="4" /> | ||
</form> | </form> | ||
</body> | </body> | ||
</html> | </html> | ||
[[Category:Scripts and Helper Files]] | |||
Latest revision as of 19:33, 7 August 2011
Sometimes, most recently for the non-script version of the FF5 map, we need to figure out where the top-left pixel of a particular location in an image falls. This HTML file includes javascript so that a person need only point the file to the right image and put in the right image size, and then the file can be opened in a browser and then the image can be clicked to get x/y coordinates.
<html>
<head>
<script language="JavaScript">
function point_it(event){
pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
document.getElementById("cross").style.left = (pos_x-1) ;
document.getElementById("cross").style.top = (pos_y-15) ;
document.getElementById("cross").style.visibility = "visible" ;
document.pointform.form_x.value = pos_x;
document.pointform.form_y.value = pos_y;
}
</script>
</head>
<body>
<form name="pointform" method="post">
< div id="pointer_div" onclick="point_it(event)" style = "background-image:url('third.png');width:512px;height:450px;">
<img src="point.gif" id="cross" style="position:relative;visibility:hidden;z-index:2;"></ div>
You pointed on y = <input type="text" name="form_y" size="4" /> - x = <input type="text" name="form_x" size="4" />
</form>
</body>
</html>