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

please descripe closer what you mean by "this did not work". Show the code of what you have tried and what you are struggeling to achieve — Nico O
– Nico O, Commented Mar 24, 2014 at 14:00

Blu · Accepted Answer · 2014-03-24 14:04:26Z

2

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

edited Mar 24, 2014 at 14:04

Blu

4,0646 gold badges41 silver badges65 bronze badges

answered Mar 24, 2014 at 13:59

Donal

33.2k10 gold badges69 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dissident Rage Over a year ago

Add this function as a click event to each area element: function clickArea(evt) { evt.preventDefault(); window.alert(evt.target.alt); }

Pierre Granger · Accepted Answer · 2014-03-24 14:00:27Z

0

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.

answered Mar 24, 2014 at 14:00

Pierre Granger

2,0202 gold badges17 silver badges22 bronze badges

Comments

notchris · Accepted Answer · 2014-03-24 14:10:02Z

0

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!

answered Mar 24, 2014 at 14:10

notchris

19010 bronze badges

Comments

cyborg86pl · Accepted Answer · 2014-03-24 14:11:25Z

0

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

answered Mar 24, 2014 at 14:11

cyborg86pl

2,6153 gold badges28 silver badges43 bronze badges

Collectives™ on Stack Overflow

Creating buttons on an image in HTML5

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related