我正在建立一个包含很多图像的网站。这个概念是一个银河系,因此您可以想象我有许多圆形的行星,并且想让它们成为可单击的按钮。
这些行星采用具有透明背景的PNG格式,我希望可单击区域仅是非透明区域(即圆形)。但是,我还没有找到解决方案。
我还尝试过在图像上方放置一个透明圆圈,然后<a href>
在该透明圆圈上而不是图像上放置透明圆圈,但这似乎也不起作用。
更糟糕的是,我的图像重叠,可能会导致我发现某些解决方案不起作用。例如,我有两个或三个重叠的图像,我希望它们全部都是一个按钮(链接到不同的页面)(并且背景中还有另一个图像),所以我不知道如果单击交叉点会发生什么这些按钮。
我尝试过的一些解决方案是:
http://jsfiddle.net/josedvq/Jyjjx/45/
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap
http://bryanhadaway.com/how-to-create-circles-with-css/
我的代码片段:
的HTML
<div>
<a href="~/SomePage">
<img draggable="false" class="AIcon" src="~/Content/Aicon.png" id="AI">
</a>
</div>
的CSS
.AIcon{
position:absolute; left: 50%; top: 40%; width: 2.5%; height:5%; opacity: 1;
-webkit-animation: AAAIcon .5s linear 0s 1 normal forwards running;
}
@-webkit-keyframes AAAIcon {
0% {left: 50%; top: 40%; width: 2.5%; height:5%; opacity: 0; z-index:4;}
100% {left: 78%; top: 20%; width: 32%; height:32%; opacity: 1; z-index:4;}
}
现在,在整个透明区域(包括透明区域)中都可以单击该图像,但是并非所有区域都是可单击的(图像中有些色块只是不可单击的)。
这让我发疯。任何指针都将非常有帮助。
您可以通过以下三种方式进行操作:
1-在以下代码段中,我在第一个月亮的图像div内使用了一个css圆。
2-或者,在第二个月亮上将圆放在上也得到相同的结果div:after
。
3-第三种方法与第二种方法完全相反:创建一个透明的圆圈,然后将月球图像放在上:after
。
第一种和第三种方法允许您将月亮用作与onclick
JavaScript鼠标事件的链接。红色元素设置为,pointer-events: none;
因此对卫星的悬停没有影响。
body {
margin:0px;
background: black;
overflow: hidden;
}
#circle1 {
width: 200px;
height: 200px;
background: purple;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
cursor: pointer;
opacity: 0.2;
}
#image1 {
display: inline-block;
width: 200px;
height: 200px;
position: relative;
background: url('http://i.imgur.com/YAWvTuu.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
#image2 {
display: inline-block;
width: 200px;
height: 200px;
position: relative;
background: url('http://i.imgur.com/YAWvTuu.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
#image2:after {
content:"";
display: inline-block;
width: 200px;
height: 200px;
background: orange;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
cursor: pointer;
opacity: 0.2;
}
#inactive {
background: tomato;
position:absolute;
top:50px;
left: 50px;
height:50px;
width: 400px;
pointer-events: none;
opacity: 0.9;
}
#third {
position:absolute;
display: inline-block;
width: 200px;
height: 200px;
background: transparent;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
cursor: pointer;
}
#third::after {
content: url('http://i.imgur.com/YAWvTuu.png');
cursor: auto;
pointer-events: none;
}
<div id="image1" alt=image><div id="circle1" onClick="window.location.href = 'http://www.google.com'"></div></div>
<div id="image2" alt=image></div><div id=third class="circle" alt=image onClick="window.location.href = 'http://www.google.com'"></div>
<div id=inactive></div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句