How can I know if I am clicking on a transparent or non-transparent part of a png on a web page?

Question

We have a quiz that we developed in Flash years ago that used hit areas to determine whether someone clicked on the appropriate portion of an image (think 'Anatomy Quiz'). These hit areas were very tedious to outline and there is no way to reuse the outline coordinate data...

Now, we're trying to re-do the thing in HTML -- So, we have a background image of a femur and a png which sits higher in the Z-order which has a portion of it completely transparent, while the other portions have 50% grey. This is used to teach the student WHERE something is on the background femur image.

I'd love to be able to use the data from that png mask layer in a 'quizzing mode' to determine whether the student correctly clicked on a specific portion of the femur... I was thinking to set the masking png to 100% transparency (so the student doesn't see it), but if the browser knew that they were clicking in the correct area of the image (that is 100% transparent on the mask), that they clicked correctly.

Any ideas on how to accomplish this with HTML, CSS, and/or jQuery?

cmcculloh · Accepted Answer · 2020-07-29 21:21:28Z

var imgData,
     width = 200,
    height = 200;

$('#mask').bind('mousemove', function(ev){
    if(!imgData){ initCanvas(); }
    var imgPos = $(this).offset(),
      mousePos = {x : ev.pageX - imgPos.left, y : ev.pageY - imgPos.top},
      pixelPos = 4*(mousePos.x + width*mousePos.y),
         alpha = imgData.data[pixelPos+3];

    $('#opacity').text('Opacity = ' + ((100*alpha/255) << 0) + '%');
});

function initCanvas(){
    var canvas = $('<canvas width="'+width+'" height="'+height+'" />')[0],
           ctx = canvas.getContext('2d');

    ctx.drawImage($('#mask')[0], 0, 0);
    imgData = ctx.getImageData(0, 0, width, height);
}

This code loads the base64 image into a canvas, and uses getImageData to obtain a 2d RGBA representation of the image. It then uses the mouse's position to find the Alpha value (opacity) at that point in the image. Canvas ImageData is stored in a 2d array in groups of 4 (RGBA). What you're after is the "A", so every fourth value in the array. You can see this reflected in the code when discovering the pixel position, it multiplies the mouse's position by 4, and then to get at the alpha value it adds 3 (adding 0 would get you R, 1 would get you G, 2 would get you B).

https://jsfiddle.net/ey1d5vgr/

As of 2011, this didn't work in IE. Also, the image has to be on the same domain as the site, so no external images which is why this example used a data URI.

On further testing of a non-square image, I had to make an adjustment -- the pixelPos calculation needed to be adjusted to 4*(mousePos.x + width*mousePos.y) (it was height) and is now available at jsfiddle.net/JKzQN

Leopd · Accepted Answer · 2011-04-12 23:34:50Z

1

I think you'll need to either process that server-side, or find a javascript library that can decode the image pixel by pixel.

A click event on a transparent part of a PNG still gets captured by the PNG. This is fairly unintuitive for a semi-transparent PNG which is z-indexed above something else, but that's standard behavior.

answered Apr 12, 2011 at 23:34

Leopd

43k32 gold badges138 silver badges173 bronze badges

Comments

Emmanuel · Accepted Answer · 2011-04-12 23:35:06Z

1

Here it is done in Action Script... (I think) I don't know how or if it can be done in Javascript though

http://dougmccune.com/blog/2007/02/03/using-hittestpoint-or-hittest-on-transparent-png-images/

answered Apr 12, 2011 at 23:35

Emmanuel

5,4835 gold badges53 silver badges74 bronze badges

Comments

jackJoe · Accepted Answer · 2011-04-12 23:35:42Z

1

my first idea was to build image maps, that way you can control what is clicked.

Other than that I have no idea and I don't think you can do it with a straightforward click on a PNG.

answered Apr 12, 2011 at 23:35

jackJoe

11.1k8 gold badges54 silver badges66 bronze badges

2 Comments

Jacob Honeyhume Over a year ago

I imagine that a HTML image map, while being the only idea I could think of as well, might defeat the purpose of the quiz. This would allow the person taking the quiz to tab through the possible choices, or hunt around by hovering the mouse, and possibly spoil part of the question.

jackJoe Over a year ago

I thaught of that, and the solution is to have image maps for all parts of the bone, and possibly with javascript control the cursor, and maybe prevent cheating. Not easy but IMO it's possible.

user578895 · Accepted Answer · 2011-04-12 23:32:24Z

0

Sorry, there's no way to do that with PNGs.

You need some other type of mask, an HTML image map being the simplest way, or depending on your browser dependencies, SVG is an option.

answered Apr 12, 2011 at 23:32

user578895

Collectives™ on Stack Overflow

How can I know if I am clicking on a transparent or non-transparent part of a png on a web page?

5 Answers 5

3 Comments

Comments

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

2 Comments

Comments

Related