在 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

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

Answer 2

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.

Answer 3

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 4

有一个伟大的Jquery插件我很久以前用于此目的称为“mapster”，请在此链接中查看。

Answer 5

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).