Responsive image map

image_map_cover

Following on from the last post, Image mapping and playing audio files onmouseover, I realised that I needed to make my image map responsive to take into account viewing the image on different divices. To this end I went about creating a script which would proportionately change the coordinates of the image map when the image is smaller than the original size and on resizing the screen.

User code for the plugin

1. Unzip and add this code anywhere after jquery:

<script type="text/javascript" src="path/to/ml.responsive.imagemap.js"></script>

Don’t forget to change the path to the file on your own server.

2. Add the code below to the footer of your website.

<script type="text/javascript">
jQuery(document).ready(function($) {
mlResizeMap();
});
</script>

All image maps on your site should now be responsive.

World Map Example

For my World Map example page click here.

Highlighting Responsive Image map areas

As the highlighting is done using pointer-events:none and HTML5 Canvas, it will not work on Internet Explorer versions less than 11, nor in Opera.
I will be investigating the use of SVG instead of using HTML5 canvas in the near future as pointer-events:none for SVG has support for all browsers.

If you are viewing this page in Safari, Chrome or Firefox hover over the windows and door to see the highlighting in action.


Using different shapes…

Previous

Next

No Comments

Comments are closed.