Png treated as rectangle - can I ignore transparent areas?

Question

I mainly use canvas where this isn't an issue but this is for a HTML project.

I have a png that is going to be a button and I want the transparent area of the png not to be picked up on mouse events. HTML deals with elements as rectangles, so is this even possible?

You can use `border-radius` if your PNG is rounded rect. But not if it is polygonal. — Praveen Kumar Purushothaman, Jul 14 '15 at 13:14

score 2 · Accepted Answer · edited May 23 '17 at 12:06

You can use an Image Map to define the clickable area of the image.

http://www.yourhtmlsource.com/images/imagemaps.html

Here is the gist of the link:

Create the map code using a tool like https://www.image-maps.com/
Use the ismap and usemap attributes on your img tag:
```
<img src="media/image1.jpg" ismap="ismap" usemap="#metroid">
```
metroid is the name of the map as specified in the map tag.

Please note that this approach creates clickable areas that act as a link. From your question, I assume that this is what you want as you were asking about a button.

If you need to react to more mouse events, you can use the approach outlined in Is it possible to style a mouseover on an image map using CSS?

Png treated as rectangle - can I ignore transparent areas?

1 Answers1