Html / css Transparency in the image link is not clickable

Question

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> 

How can I get accessible only to the stellar part of the image? -or- How to make transparent parts of the image inaccessible for viewing?

Answer 1

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 just an example. You must use the area shape map tool on Dreamweaver and draw the polygon of the u area.

Answer 2

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

For more information about which image map sees this wikipedia article. Image map

Answer 3

In fact, we can make the position of the parent element: relative and use z-index to place the link area above the image.

Sort of:

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