Html / css Transparency in the image link is 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> 

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?

+4
source share
3 answers

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.

+3
source

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

+1
source

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

Source: https://habr.com/ru/post/1340561/


All Articles