Creating Interactive Image on Website
I'm doing some research to create an interactive image on a website. I come up with one of the solutions to use the map and area tag for the background img tag. But, since there will be a lot of small area in the image. I think that it will be tedious to use the map and area tag to define the area one by one.

I also think to crop the interactive image, and make it a single another image. Thus, separating it from the background image. But using a separate image for each interactive area is also tedious since every interactive area/image is different from each other, so I have to crop each image and ends up with each image has different source.

Is there a best practice to do this? I'd really appreciate for any suggestion from anyone.

Thank you
Creating Interactive Image on Website
===

I'm doing some research to create an interactive image on a website. I come up with one of the solutions to use the map and area tag for the background img tag. But, since there will be a lot of small area in the image. I think that it will be tedious to use the map and area tag to define the area one by one.

I also think to crop the interactive image, and make it a single another image. Thus, separating it from the background image. But using a separate image for each interactive area is also tedious since every interactive area/image is different from each other, so I have to crop each image and ends up with each image has different source.

Is there a best practice to do this? I'd really appreciate for any suggestion from anyone.

Thank you