Image Mapping

[JaredKramer40]

http://www.w3schools.com/tags/tag_map.asp

[RJP43]

http://imagemap-generator.dariodomi.de/ -- This is the tool we used for this Nelson page. You can find our underlying code [here[(https://github.com/RJP43/CitySlaveGirls_bootstrap/blob/master/map.html).

[RJP43]

Here are other interesting ways we might consider mapping your data:

http://www.outsharked.com/imagemapster/ -- jQuery plugin that lets you activate HTML image maps https://www.google.com/earth/outreach/tutorials/earthoverlays.html -- uses google earth and allows you to overlay images on the map https://www.maptiler.com/maptilerlayer/ -- overlay tool that allows you to adjust transparency of overlay

[ebeshero]

@ebeshero @jonhoranic Let's start here.

[ebeshero]

@jonhoranic On trying to make your image mapping borders visible:

• Try setting the css on the <area> element to display:block since the default browser setting is likely to be display:none see https://www.sitepoint.com/community/t/can-you-style-map-and-or-area-tags/5946/6

• Or you might try converting your image to SVG, and writing JavaScript to respond to it.

• You could still write JavaScript to respond to the area elements, perhaps on mouseclick to reveal some additional information?