When I hover over the transparent part of a PNG, it still acts as though I'm hovering over the actual image. Is there a way that I can prevent that from happening? So that it only takes action when I hover over the visible part of the image, and not the transparent part?
I tried to crop out the transparency, but I couldn't find a way how.
This works by loading a png into an HTML-5 canvas element, and then querying the canvas for the alpha value of the clicked pixel.
HTML as follows...
<!-- create a canvas element to hold the PNG image -->
<canvas id="canvas1" width="500" height="500"></canvas>
Javascript like this...
// select the canvas element with jQuery, and set up
// a click handler for the whole canvas
$('#canvas1').on('click', function(e) {
// utility function for finding the position of the clicked pixel
function findPos(obj) {
var curleft = 0, curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return { x: curleft, y: curtop };
}
return undefined;
}
// get the position of clicked pixel
var pos = findPos(this);
var x = e.pageX - pos.x;
var y = e.pageY - pos.y;
// get reference to canvas element clicked on
var canvas = this.getContext('2d');
// return array of [RED,GREEN,BLUE,ALPHA] as 0-255 of clicked pixel
var pixel = canvas.getImageData(x, y, 1, 1).data;
// if the alpha is not 0, we clicked a non-transparent pixel
// could be easily adjusted to detect other features of the clicked pixel
if(pixel[3] != 0){
// do something when clicking on image...
alert("Clicked the dice!");
}
});
// get reference to canvas DOM element
var canvas = $('#canvas1')[0];
// get reference to canvas context
var context = canvas.getContext('2d');
// create an empty image
var img = new Image();
// after loading...
img.onload = function() {
// draw the image onto the canvas
context.drawImage(img, 0, 0);
}
// set the image source (can be any url - I used data URI to keep demo self contained)
img.src = "data:image/png;base64,iVBORw0KGgoAAAANS ... more image data ...TkSuQmCC"; // PNG with transparency
I know I've seen sites that let you "choose a color" based on the pixel you're hovering over. I'm not sure how they do it, but one option is to create an html image map (like this), so that different parts of your PNG trigger the "hover" and other parts don't. In essence, the mouse isn't hovering over the PNG; it's hovering over areas that you define in your HTML.
Here's an example that I took directly from the link above:
<body>
<img src="trees.gif" usemap="#green" border="0">
<map name="green">
<area shape="polygon" coords="19,44,45,11,87,37,82,76,49,98" href="http://www.trees.com/save.html">
<area shape="rect" coords="128,132,241,179" href="http://www.trees.com/furniture.html">
<area shape="circle" coords="68,211,35" href="http://www.trees.com/plantations.html">
</map>
</body>
