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)