Question

21

Javascript mouse click coordinates for image

rated 0 times [ 26] [ 5] / answers: 1 / hits: 55442 / 9 Years ago, tue, january 19, 2016, 12:00:00

The assignment says Your task is to write an HTML file that contains JavaScript that will randomly display one of the images above. If the page is refreshed in the browser, you should get another random image. so I did it.

Now it says When the user clicks anywhere on the image, display an alert window that shows the X and Y position of where the click occurred relative to the image. Here is my code:

<html>

<head>

<title>Assignment 2</title>

<script type=text/javascript>

  var imageURLs = [

       p1.jpg

     , p2.jpg

     , p3.jpg

     , p4.jpg

  ];

  function getImageTag() {

    var img = '<img src=';

    var randomIndex = Math.floor(Math.random() * imageURLs.length);

    img += imageURLs[randomIndex];

    img += ' alt=Some alt text/>';

    return img;

  }

</script>

</head>

<body>

<script type=text/javascript>

  document.write(getImageTag());

</script>

</body>

</html>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

monetm

Add To Favorites

Follow

Total Points: 615

Total Questions: 103

Total Answers: 119

Location: Finland

Member since Fri, Oct 21, 2022

2 Years ago

answered 9 Years ago kaleyv · Accepted Answer

You can actually use HTML for this. The image tag has an attribute known as ismap.

What this attribute does is specify that an image is part of a server-side image map. When clicking on such map, the click coordinates are sent to the server as a url query string.

Images must be nested under links for this to work. Here is an example

<a href=http://www.google.com>

    <img src=myimage.png alt=My Image ismap>

</a>

If you can't use image maps for this, here is a javascript/jquery solution

First, you need to include the jQuery library at the bottom of your body tag.

<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js></script>

$(document).ready(function() {

    $(img).on(click, function(event) {

        var x = event.pageX - this.offsetLeft;

        var y = event.pageY - this.offsetTop;

        alert(X Coordinate:  + x +  Y Coordinate:  + y);

    });

});

<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>



<img src=http://vignette1.wikia.nocookie.net/seraphina/images/b/b2/Dragonseraphina.jpg/revision/latest?cb=20160103194957 height=200 width=200 alt=dragon>

You listen for the click event, and pass in event as the parameter.

The event.pageX property returns the position of the mouse pointer, relative to the left edge of the document.