Check on which part was clicked?

Question

can you check in JS or JQuery in which part of the image was clicked?

For example we have this: Picture

Can you check if the user clicked on a specific pen? For example the red one?

Thanks

score 2 · Answer 1 · edited May 23 '17 at 12:31

2

You have at least three options:

Split the image into several images each with one pen, and then put them into a link that specifies the pen (e.g. <a href="#red"><img src="redpen.jpg" /></a>.
You can use an HTML map with area tags.
You can use the coordinates of your click event to decide which pen was clicked like described in this answer: https://stackoverflow.com/a/4249711/387573

edited May 23 '17 at 12:31

Community

1
1

answered Mar 12 '16 at 14:33

crackmigg

5,571
2
30
40

IMO 1 is the best - in case image will be resized, you don't need to wory about image map coords or click coords scaling – llamerr Mar 12 '16 at 14:39

score 1 · Accepted Answer · answered Mar 12 '16 at 14:34

1

use of image-mapping is better for this kind of requirement. map the required area and link to required url. know more about image-mapping http://www.w3schools.com/tags/tag_map.asp

answered Mar 12 '16 at 14:34

ameenulla0007

2,663
1
12
15

yup obvious, which IDE you use? – ameenulla0007 Mar 12 '16 at 14:39
if you are using Dreamweaver, it is too easy to achieve, as you just directly mark on the image, and mark-up of pixels are automated. – ameenulla0007 Mar 12 '16 at 14:40
eclipse with jsdt. – Hemran Mar 12 '16 at 14:40
there are map generators in the inet ^^ – Hemran Mar 12 '16 at 14:46
thats great you found it.. you are always welcome mate. better add up a link, from where you are generating map links. – ameenulla0007 Mar 12 '16 at 14:49
1

That's great.. This could be helpful for the community who are looking for this kind of result.. :) – ameenulla0007 Mar 12 '16 at 18:22

score 0 · Answer 3 · answered Mar 12 '16 at 14:47

If you don't want to use an image map you can also just detect the click's x & y position relative to the image and then from there, work out what you want to do.

This will not be very accessible but it will work.

You can work out the relative x & y position of the click like so. (Try clicking on the yellow pen)

var image = document.querySelector('img'); 

image.addEventListener('click', onClick, true);

function onClick(event){
  var imageBoundingRect = image.getBoundingClientRect();
    
    var x = event.pageX - imageBoundingRect.left;

    // We are not using the y co-ordinate but this is how you would get it.
    var y = event.pageY - imageBoundingRect.top;

 if (x >= 345 && x <= 380){
      alert('Clicked on the yellow pen.')
    }
}

<img src="http://www.wilde13-werbemittelkatalog.de/pictures/werbekugelschreiber.jpg"/>

Check on which part was clicked?

3 Answers3