Javascript 如何使悬停在PNG中的透明度上不会'；不算悬停吗？
当我将鼠标悬停在PNG的透明部分上时，它仍然会表现为我将鼠标悬停在实际图像上。有什么方法可以防止这种情况发生吗？这样，它只在我将鼠标悬停在图像的可见部分而不是透明部分时才采取行动Javascript 如何使悬停在PNG中的透明度上不会'；不算悬停吗？,javascript,html,css,hover,Javascript,Html,Css,Hover,当我将鼠标悬停在PNG的透明部分上时，它仍然会表现为我将鼠标悬停在实际图像上。有什么方法可以防止这种情况发生吗？这样，它只在我将鼠标悬停在图像的可见部分而不是透明部分时才采取行动 我试图裁剪出透明度，但我找不到方法。我知道我见过一些网站，它们允许你根据悬停的像素“选择颜色”。我不知道他们是如何做到的，但一个选择是创建一个新的，这样PNG的不同部分就会触发“悬停”，而其他部分则不会。本质上，鼠标不是在PNG上悬停；它悬停在您在HTML中定义的区域上 下面是我直接从上面的链接中获取的一个示例： &l
我试图裁剪出透明度，但我找不到方法。我知道我见过一些网站，它们允许你根据悬停的像素“选择颜色”。我不知道他们是如何做到的，但一个选择是创建一个新的，这样PNG的不同部分就会触发“悬停”，而其他部分则不会。本质上，鼠标不是在PNG上悬停；它悬停在您在HTML中定义的区域上 下面是我直接从上面的链接中获取的一个示例：
<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>
<!-- create a canvas element to hold the PNG image -->
<canvas id="canvas1" width="500" height="500"></canvas>
简短回答：不，你不能那样做。所有图像均显示为矩形区域，该矩形区域中的所有事件均由图像捕获（alpha与其他三个通道（红色、绿色、蓝色、do）具有相同的（零）效果）。@Cristy@billymon Well，只有在他给问题加上标签的时候，才能在CSS中完成。在我的历史中，有些编辑器可以很容易地添加这个，不记得是哪一个。；）@DOCASAREL Dreamweaver:我想是的；-）我从和中获得了灵感，您还可以对代码进行更多的操作，并使光标在图像右侧悬停时变为指针；）这很好@morgul-我喜欢你将所有像素信息逻辑放入一个可重用函数的方式。保持应用程序逻辑清晰易懂。
// 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