How to make a circular button out of a PNG image? - html

Question

I'm building a website with a lot of images. The concept is of a galaxy so you can imagine I have a number of round planets and I want to make them clickable buttons.
These planets are in PNG format with transparent background and I want the clickable area to only be the non-transparent area (which is the shape of a circle). However, I have not found a possible solution to do this.
I have also tried to put a transparent circle on top of the image, and put <a href> on the transparent circle instead of on the image, but this does not seem to work either.
What makes it worse is that I have overlapping images which might cause some of the solutions I found not working. For example I have two or three overlapping images and I want them all to be a button (linking to different pages) (and I have another image in its background) so I don't know what's going to happen if I click at the intersection of these buttons.
Some of the solutions I've tried are:
http://jsfiddle.net/josedvq/Jyjjx/45/
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap
http://jsfiddle.net/DsW9h/
http://bryanhadaway.com/how-to-create-circles-with-css/
A snippet of my code:
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;}
}
As it is now the image is clickable within the whole square of the image, including the transparent area, but not all of the area is clickable (there are some patches in the image where it's just not clickable).
This is driving me nuts. Any pointers would be extremely helpful.

Answer 1

You have three ways to do it:
1- In the following snippet, I have used a css circle inside an image div on the first moon.
2- Alternatively, got the same result on the second moon placing the circle on div:after.
3- A third method is simply the opposite of the second: create a transparent circle and let the moon image on :after.
The first and third methods allow you to use the moon as a link with onclick javascript mouse event. The red element is set with pointer-events: none; so it have no effect on the moons' hovers.
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>

Answer 2

I'm not sure if I've interpreted your question properly, but look into z-index. If there's elements overlapping each other, this will be a reason why they're not able to be clicked.

Answer 3

So, you can wrap the planet or circle in an <a> tag, border-radius that <a> element to be 100% which makes it a full circle and then hide the overflow.
See this: https://jsfiddle.net/xcqy7r14/2/
Markup:
<a href="#">
<canvas></canvas>
</a>
<br><br>
<a href="#">
<canvas></canvas>
</a>
CSS:
a {
border-radius: 100%;
overflow: hidden;
display: inline-block;
}
canvas {
width: 100px;
height: 100px;
display: inline-block;
background: #f00;
border-radius: 100%;
}