Question

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

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

如何才能使图像的星形部分可点击？ -要么- 如何使图像的透明部分无法点击？

Answer 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上的区域形状贴图工具并绘制您需要的区域的多边形。

Answer 2

你需要使用imagemap查看这个网站来帮助你做到这一点...... http://www.image-maps.com/

有关图像地图的详细信息，请参阅此维基百科文章。 Image map

Answer 3

实际上我们可以使父元素位置：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;
}

html / css图像链接中的透明度不可点击

3 个答案: