html/css Tranparency in image link not clickable

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>
开发者_如何学Python

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?

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.

you need to use an imagemap check out this site to help you do it... http://www.image-maps.com/

For more information about what an image map is see this wikipedia article. Image map

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