Dynamic Responsive Image Map Generator With jQuery - imageMaps.js

imageMaps.js is a jQuery based image map code generator that allows you to dynamically add draggable, editable image maps with custom links to an image you provide.

Works on responsive web design that automatically adjust the size & position of the image map depending on the current window size.

See Also:

• Fully Responsive Image Maps In jQuery - rwdImageMaps.js
• jQuery Plugin For Responsive Image Maps - image-map.js

How to use it:

1. Download and put the jquery.imagemaps.js script after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="jquery.imagemaps.js"></script>

2. Load the jQuery UI for the draggable functionality.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

3. Insert an image to the webpage.

<div class="imagemaps-wrapper">
  <img src="image.jpg" draggable="false">
</div>

4. Create controls for the image map code generator.

<div class="imagemaps-control">
  <fieldset>
    <legend>Settings</legend>
    <table class="table table-hover">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Links</th>
          <th scope="col">Target</th>
          <th scope="col">Delete</th>
        </tr>
      </thead>
      <tbody class="imagemaps-output">
        <tr class="item-###">
          <th scope="row">###</th>
          <td><input type="text" class="form-control area-href"></td>
          <td>
            <select class="form-control area-target">
              <option value="_self">_self</option>
              <option value="_blank">_blank</option>
            </select>
          </td>
          <td>
            <button type="button" class="btn btn-danger btn-delete">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </fieldset>
  <div>
    <button type="button" class="btn btn-info btn-add-map">Add New</button>
    <button type="button" class="btn btn-success btn-get-map">Get Code</button>
  </div>
</div>

5. Call the function on the image wrapper to initialize the image map code generator.

$('.imagemaps-wrapper').imageMaps({
  addBtn: '.btn-add-map',
  output: '.imagemaps-output',
  stopCallBack: function(active, coords){
    // console.log(active);
    // console.log(coords);
  }
});

6. Get the HTML code from the existing image maps.

$('.btn-get-map').on('click', function(){
  let oParent = $(this).parent().parent().parent();
  let result  = oParent.find('.imagemaps-wrapper').clone();
  result.children('div').remove();
  // console.log(result.html());
  alert(result.html());
});

7. All default settings for the image map code generator.

$('.imagemaps-wrapper').imageMaps({
  rectWidth: 100,
  rectHeight: 60,
  areaHref: '.area-href',
  areaTarget: '.area-target',
  btnDelete: '.btn-delete'
});

8. The plugin also works with images with pre-defined image maps.

<div class="imagemaps-wrapper">
  <img src="image.mp3" draggable="false" usemap="#imagemapsdemo">
  <map class="imagemaps" name="imagemapsdemo"><area shape="rect" name="imagemaps-area" class="imagemaps-area0" coords="545,75,1047,389" href="https://www.jqueryscript.net" target="_blank"></map>
</div>

---

This awesome jQuery plugin is developed by Tiacx. For more Advanced Usages, please check the demo page or visit the official website.