How to make the visible part of png image with transparent background as a link?

Question

I wanted to use a .png image, with transparent background, as a link on my website.

I tried with this html:

<a href="index.html">
    <img border="0" src="smiley.png" alt="smiley" width="150" height="150">
</a>

and this css :

a
{
    text-decoration: none;
    color: inherit;
}

However, the image is still clickable on the transparent background of my image.

Here is the illustration of what I am trying to get :

***Note: This picture is for illustration only. I am 100% sure that my picture has transparent background.*

How can I use my image as a link whenever the cursor is on the smiley face only (visible part) ?

Answer 1

For this particular image, you could use an image map with a circle as the active area.

<map id="ImgMap0" name="ImgMap0">
    <area alt="" coords="30, 32, 30" href="http://www.link.com" shape="circle" />
</map>
<img src="http://placehold.it/64x64" alt="" usemap="#ImgMap0"/>

Answer 2

Use the css-attribute border-radius: 50%; to curve sides (If image is circular)

Answer 3

Try like this, mapping technique

<map name="imgmap">
<area shape="smiley" coords="x,y,radius" href="link.html" alt="img_alt">
</map>

Answer 4

You could also use css3. I found this article with details and a good example

I did not 'hardly' test this out, but you can give it a try.

CSS

.circle {
    background: none repeat scroll 0 0 #CCCCCC;
    /* some cross-browser css missing for border-radius */
    border-radius: 100px 100px 100px 100px;
    color: #FFFFFF;
    display: block;
    float: left;
    font-size: 20px;
    height: 200px;
    line-height: 200px;
    margin-right: 30px;
    text-align: center;
    width: 200px;
}
.circle-border {
    background: none repeat scroll 0 0 #CCCCCC;
    border: 1px solid #999999;
    /* some cross-browser css missing for border-radius */
    border-radius: 100px 100px 100px 100px;
    color: #FFFFFF;
    display: block;
    float: left;
    font-size: 20px;
    height: 199px;
    line-height: 200px;
    margin-right: 30px;
    text-align: center;
    width: 199px;
}

HTML

<a href="#" class="circle">BUTTON</a>
<hr style="clear:both;float:left;height:1px;width:100%;" />
<a href="#" class="circle-border">BUTTON</a>

Re-fiddled here

Answer 5

You don't have to use an image map. I tried it with 2 <div> s and it worked. Just put the smiley and a <div> with the attribute onclick="window.open('yoururl')" in a main <div> . Make both <div> s round and invisible.

HTML:

<div id="maindiv">
<img src="smiley.png" alt="" id="smiley"/>
<div id="LinkArea" onclick="window.open('https://google.com')"></div>
</div>

CSS:

#maindiv {
height: 150px;
width: 150px;
background-color: rgba(0,0,0,0);
border-radius: 100%;
z-index: 2;
position: absolute;
top: 0;
left: 0;
}
#smiley {
height: 150px;
width: 150px;
z-index: 1;
}
#LinkArea {
height: 150px;
width: 150px;
background-color: rgba(0,0,0,0);
border-radius: 100%;
cursor: pointer;
z-index: 3;
position: absolute;
top: 0;
left: 0;
}