Creating buttons on an image in HTML5

Question

I am creating a website of a map of South-East Asia. I want the user be able to press on country on the map and a pop up box will come up showing information of the country pressed on.

How will I make the buttons on the map work? I have tried to transparent the countries in different images and overlay them in HTML and CSS however this did not work

Answer 1

I'd try to solve this with SVG.

It gives you not only an ability to define complex shapes (and also export code from ex. illustrator) but also to make your UI more user-friendly (color overlays, outlines etc).

Answer 2

As stated above, the most common method of doing this is by using an image map. However, if you would like an alternative that is a little more interactive you could use jQuery. There are a number of jQuery map / floorplan plugins that can achieve this elegantly.

Here are a few I have found from a simple Google search:

JVectorMap - visit

mapSVG - visit

JQVMAP - visit

I hope this helps!

Answer 3

You need to use an image map. Have a look here

Answer 4

img map area are exactly for this. You can mix it with css and js if you need to add/remove classes on hover, like hide/show the country hover.