Menu
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.
427
PNG images can contain alpha (transparency) information. Unlike GIF, which requires a particular color to be designated fully transparent, PNG allows the transparency of all pixels to take any value from fully transparent though partial transparency to full opacity.
PNG files, on the other hand, do support transparency. Web designers can apply transparent backgrounds to their images – and even different degrees of transparency. It means PNG images integrate better with different background colors on a page and text is easier to read.
PNG is short for Portable Network Graphic, a type of raster image file. It's particularly popular file type with web designers because it can handle graphics with transparent or semi-transparent backgrounds.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
