We're pleased to announce that we have a new add-on in the concrete5 marketplace, the 'Responsive Image Map' block.

As I discuss in the video above, image maps are quite an old HTML feature and in terms of modern web development normal image maps have a couple of issues:

  • By default they aren't responsive
  • They're fiddly to build, especially if you are building a site using a CMS like concrete5

Quite some time ago we approached the above issues and developed a block for version 5.6 of concrete5. We felt that it solved the above issues so nicely, that it was worth converting the block to support version 5.7. Not only does the block solve the above issues, it also supports using SVGs as the source image, meaning you can have a fully responsive, vector based image map that looks great on retina screens.

In short, it allows you pick an image, define the number of hotspots you want on your image and select where the links point to.

To define the hotspots, all you do is draw on the outline (like nodes in a vector shape) within the browser - no difficult entry of co-ordinates.

image_map_screenshot_1_1439210588.png

Once set up, the block takes care of outputting the image map, using an SVG technique so that no Javascript is required. To support older browsers that don't support SVG (yuck), an additional 'legacy' template is included as well that achieves the same outcome, but uses some javascript.

Used sparingly, we think an image map still has a place in modern web development and can be useful to achieve certain interactivity. For example, you could use it to link up:

  • Maps (like in the demo)
  • Technical diagrams, linking to more information about components
  • Charts or figures, to explain data in more detail or offer the raw data for download
  • House floor-plans and architectural diagrams
  • Group photos, linking to team member profiles or CVs

Or you might even just want to have some fun with it, by creating a few 'easter eggs' on your site.

 
Used alongside clear and accessible navigation, image maps can simply present another option for visitors to use to find what they are looking for.

You can find the new add-on on the concrete5 marketplace.

-Ryan