0

So I have 1920x1080px (size of screen) wide picture that is blank with only like 10x8px that actually have something in them and the rest of it being a blank PNG and so I use this big size to position it perfectly and I intend to do it like 50 times with similliar sizes but the problem is that all of them should be clickable, which isn´t possible as they take the whole space and so my question is if there is some code to tell the website to only do something (onclick) if the user clicks part of the image that isn´t blank.

Sves100
  • 47
  • 1
  • 7
  • it's highly unusual to have a 1920x1080 image to display only 10x8 in it. Why not simply use a small 10x8 image, position it in CSS and have it simply be clickable ? – lipsumar Jun 22 '19 at 14:24
  • well if there isn´t any other way I will have to result to this but the thing is those aren´t squares but more like shapes without any form so positioning would be a real headache, and 1920x1080 perfect as I have a big image that is 1920x1080 and I cut it into these small pieces and so its great for this reason as I don´t have to position it and it aligns with the background picture – Sves100 Jun 22 '19 at 14:27
  • well what you suggest is probably possible, but would require a _lot_ of javascript and add a _lot_ of calculations resulting in poor performances. i really encourage you to use images of their actual sizes. – lipsumar Jun 22 '19 at 14:30
  • A fairly oldschool technique along these lines is to use one big image (just one) and a `` element [qv](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map) where you define your boundaries for clicking various parts of the image. – James Jun 22 '19 at 14:38
  • You might want to read this post. There might be something there that could help, although that is a big image with a small area of interest. The JS library they mention might have something: https://stackoverflow.com/questions/8751020/how-to-get-a-pixels-x-y-coordinate-color-from-an-image – SScotti Jun 22 '19 at 15:00

0 Answers0