图片链接中的html/css透明度不可点击答案

【问题标题】：html/css Tranparency in image link not clickable图片链接中的html/css透明度不可点击
【发布时间】：2011-06-30 23:46:03
【问题描述】：

我有一个星星的 .png 图像。恒星周围的区域是透明的。这是我的代码示例

<a href='nextPage.html'><img src='starImage.png' border='0'></a>

如何只让图片的星号部分可点击？ -要么- 如何让图片的透明部分无法点击？

【问题讨论】：

标签： image hyperlink transparency alpha

【解决方案1】：

你需要使用区域形状图

<a href='nextPage.html'><img src='starImage.png' border='0'usemap="#Map" /></a>
<map name="Map" id="Map">
  <area shape="poly" coords="54,52,55,52,94,77,118,42,179,63,174,119,105,128,50,122,31,84,54,53" href="#" />
</map>

这只是一个例子。你必须使用dreamweaver上的区域形状图工具，绘制出你需要的区域的多边形。

【讨论】：

嗨，我知道这是一个旧帖子，但是...地图区域没有响应是吗？我希望能够使用 %age 而不是绝对值。

【解决方案2】：

您需要使用图像地图查看此站点以帮助您完成此操作... http://www.image-maps.com/

有关什么是图像地图的更多信息，请参阅这篇维基百科文章。 Image map

【讨论】：

【解决方案3】：

其实我们可以让父元素 position:relative，并使用 z-index 将链接区域放置在图片上。

类似：

div.imageArea {
    position: relative;
    width: 150px;
    height: 150px;
    z-index: 2;
}
div.imageArea a {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;        
    background: transparent no-repeat url('images/starImage.png') 0 0;
    z-index: 3;
}

【讨论】：