Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE HTML>
- <html>
- <head>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
- <style type="text/css">
- html {
- border: none;
- overflow: auto;
- }
- body {
- margin: 0;
- padding: 0;
- font-family:verdana;
- font-size:9px;
- }
- img {
- position: absolute;
- top: 0%;
- left: 0%;
- margin:30px;
- }
- </style>
- <title>jQuery - Mouse Coordinates Over Image</title>
- </head>
- <body>
- koordinat x <input type="text" id="x" name="x" value="0" /> : y <input type="text" id="y" name="y" value="0" />
- <img src="http://inapcache.boston.com/universal/site_graphics/blogs/bigpicture/flight_2012/bp1.jpg">
- <script type="text/javascript">
- $('img').click(function(event){
- var x = event.pageX - this.offsetLeft;
- var y = event.pageY - this.offsetTop;
- alert('X: '+x+' Y:'+y);
- });
- $('img').mousemove(function(event){
- var x = event.pageX - this.offsetLeft;
- var y = event.pageY - this.offsetTop;
- $('#x').val(x);
- $('#y').val(y);
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement