Image clickable multiple areas approach

Question

I've just started to learn web development and I have an idea to do the following: Take simple image (jpeg/png) and make some areas of that image clickable (or other events on those areas). For example, when I click on specific area on the image, this area highlights, other part of the image shadows. First what I googled was HTML map/area tags. But I want to know other approaches which I can use to do that. Just give me some keywords, nothing more.

Thanks in advance

Answer 1

I stumbled upon the same problem some time ago:

• HTML maps tags are the quickest way but in the long run often give problems often because of the lack of support.
• Going for an SVG image which is widely supported across all browsers is a good solution. There are many JPEG/PNG to SVG converters on the web (even if quality would not be the same)
• Another brutal approach is to create some clickable overlay divs over the image, it is a good approach if the areas to click are rectangular.

Hope you find a good solution :)