2

I've been trying to figure out how to make a picture have different points where the user can click on one and it will display a description. It's the same concept as an interactive map, just it's not a map, it's just a picture. The image would be for a website.

Something similar to this codepen (http://codepen.io/ scarl3tt/details/jEBmyG) but i can't get it to work with a different image.

I'm not fluent in either CSS, HTML or JS. However, I am fairly good with both CSS and HMTL.

So I'm wondering, how would I code it? OR is there a tool that generates the code automatically?

Thanks in advance Joe

Joe
  • 253
  • 1
  • 7
  • 20
  • You can use an imagemap:http://www.w3schools.com/tags/tag_map.asp – Jonathan Jan 24 '16 at 11:43
  • Position some elements over the image (most likely with absolute positioning) and attach a click event to them - [fiddle](https://jsfiddle.net/986m7oop/) – Brett Gregson Jan 24 '16 at 11:48
  • You said you tried to get the codepen example work with a different image but with no success, can you what you've tried on codepen or jsfiddle. – Antonio Smoljan Jan 24 '16 at 11:49
  • All your answers have been awesome cheers Jonathan, Eskimo and Antonio! – Joe Jan 24 '16 at 15:35

2 Answers2

4

You should create an image map using the <area> and <map> tags

There are lots of generators available online too, just do a Google Search

You can also check out this question for more tools used to create Image Maps

Community
  • 1
  • 1
1

With your skills you should use htmlmaps and catch the basic behavior via simple js id-hover/onclick catching.

The useful generators for maps can be found in google.

Daniel Mizerski
  • 1,123
  • 1
  • 8
  • 24