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

发布于 2024-10-18 05:43:50 字数 196 浏览 2 评论 0原文

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

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

如何仅使图像的星号部分可单击？ -或者- 如何使图像的透明部分不可点击？

原文

I have a .png image of a star. The area around the star is transparent. Here is an example of my code

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

How do I get only the star part of the image to be clickable?
-or-
How do I get the transparent parts of the image to not be clickable?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

百思不得你姐 2024-10-25 05:43:51

您需要使用区域形状图，

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

You need to use an area shape map

<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>

this is only an example.
You must use the area shape map tool on dreamweaver and draw the polygon of area u need.

回复收藏 0 原文

咿呀咿呀哟 2024-10-25 05:43:51

您需要使用图像映射查看此网站来帮助您做到这一点...
http://www.image-maps.com/

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

回复收藏 0 原文

怪我太投入 2024-10-25 05:43:51

事实上，我们可以使父元素为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;
}

In fact we can make the parent element position:relative, and use z-index to place the link area over the image.

Something like:

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;
}

回复收藏 0 原文

~没有更多了~