Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
Is it possible for click events to register on an image only when the pixel clicked isn’t transparent?
If I have a right triangle image, only have the click event register on the actual triangle itself, rather than the whole box, half of which is empty.
Is this even possible without using <canvas>?
I’m already using jQuery in the project, if it has some way of doing this.
Not with plain html and an image.
You might be able to get away with a (relatively unsupported still afaik) css background clip, or using an (and I can’t believe I’m recommending this) image map. More code-heavy options would include checking the pixel at the point clicked, but JS doesn’t always have access to image data (depends on the browser) and an ajax request for the server to do this would be overkill I think. Canvas and SVG might be decent options for you, but they introduce additional dependencies that you have to be aware of that might not be worth it.
Alternately, you can create the triangle in HTML/CSS. 🙂