可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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.

回答1:

Can be done by converting png to canvas element

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.

Working demo: http://jsfiddle.net/x9ScK/3/

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

回答2:

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>