如何使PNG中的悬停在透明度上不计为悬停？
Posted
技术标签:
【中文标题】如何使PNG中的悬停在透明度上不计为悬停？【英文标题】：How to make it so that Hovering Over Transparency in a PNG doesn't count as hovering? 【发布时间】：2014-03-01 03:04:48 【问题描述】：当我将鼠标悬停在 PNG 的透明部分上时，它仍然表现得好像我悬停在实际图像上一样。有没有办法可以防止这种情况发生？这样只有当我将鼠标悬停在图像的可见部分而不是透明部分时它才会采取行动？
我试图裁剪出透明度，但我找不到方法。
【问题讨论】：
简短回答：不，你不能那样做。所有图像都显示为一个矩形区域，并且该矩形区域中的所有事件都由图像捕获（alpha 与其他三个通道（红色、绿色、蓝色、do）对此具有相同（零）效果）。 @Cristy imdb.com/title/tt0086006 @BillyMoon 好吧，这不能在CSS 中完成，因为他标记了问题。
【参考方案1】：
可以通过将png转换为canvas元素来完成
这是通过将 png 加载到 html-5 画布元素中，然后在画布上查询被点击像素的 alpha 值来实现的。
工作演示：http://jsfiddle.net/x9ScK/3/
HTML如下...
<!-- create a canvas element to hold the PNG image -->
<canvas id="canvas1" ></canvas>
像这样的javascript...
// 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
【讨论】：
我是这么认为的 ;-) 我从 ***.com/a/15639392/665261 和 ***.com/a/8977686/665261 和 ***.com/a/6736135/665261 获得灵感 您还可以多玩一点代码，并在将鼠标悬停在图像的右侧部分时将光标变为指针；）jsfiddle.net/x9ScK/7 这很好@morgul - 我喜欢你将所有像素信息逻辑放入可重用函数的方式。保持应用逻辑简洁且易于理解。【参考方案2】：我知道我见过一些网站可以让您根据悬停的像素“选择颜色”。我不确定他们是如何做到的，但一种选择是创建一个html image map (like this)，以便 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>
【讨论】：
在我的历史中，有些编辑器可以轻松添加，但不记得是哪个了。 ;) @DOCSAREL Dreamweaver :D以上是关于如何使PNG中的悬停在透明度上不计为悬停？的主要内容，如果未能解决你的问题，请参考以下文章