/vanilla-rwdImageMaps

Responsive Image Maps without jQuery

Primary LanguageJavaScriptMIT LicenseMIT

Vanilla RWD Image Maps

Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize

This project is a vanilla JS clone of stowball's jQuery-rwdImageMaps.

Usage:

  • Include the script in your project (either by downloading it, or by using jsdelivr).
  • If possible, add correct, unitless width and height attributes to your image map images. You can override these in CSS to make them responsive.
  • Just call the rwdImageMaps() function after you loaded in the script:
rwdImageMaps('img[usemap]');

You may want to wait until the Document has loaded before running the function (this is similar to $(document).ready()):

document.addEventListener("DOMContentLoaded", function(e) {
    rwdImageMaps('img[usemap]');
});

Demo:

https://git.luca-kiebel.de/vanilla-rwdImageMaps/example.html

Copyright (c) 2019 Luca Kiebel
Licensed under the MIT license (see LICENSE for details)
Minified version created with JSCompress: https://jscompress.com